共计 1489 个字符，预计需要花费 4 分钟才能阅读完成。
预热
在 IOS11 中 Webkit 新增了两个的 css 函数，别离是 env() 和 constant()，他们的作用是：用于设定平安区域与边界的间隔，能够在 iPhone X 等的无边框显示屏上精美地显示您现有的网站，内容会主动插入显示屏的平安区域内，因而不会被圆角或设施的传感器外壳遮挡。
之所以写了 constant 和 env 两种 是因为 ios11.2 版本当前 constant 废除，env 失效，所以写 2 种是为了兼容所有 ios 版本。
留神：
在 H5 调用的时候，须要网页设置 <meta name=”viewport” content=”… viewport-fit=cover”> 的时候才会失效。
在 微信小程序 viewport-fit 默认是 cover，所以咱们不须要额定设置。
env() CSS 函数以相似于 var 和 custom properties 的形式将用户代理定义的环境变量值插入你的 CSS 中。区别在于，环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而自定义属性则限定在申明它们的元素中。
env() 和 constant()函数别离承受 4 种参数：
safe-area-inset-left：平安区域间隔右边边界的间隔
safe-area-inset-right：平安区域间隔左边边界的间隔
safe-area-inset-top：平安区域间隔顶部边界的间隔
safe-area-inset-bottom：平安间隔底部边界的间隔
/ Using the four safe area inset values with no fallback values /
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
/ Using them with fallback values /
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);
复制代码
如图所示：
实操
h5
// 先 constant 再 env
padding-bottom: calc(8px + constant(safe-area-inset-bottom));// 兼容 IOS<11.2
padding-bottom: calc(8px + env(safe-area-inset-bottom)); // 兼容 IOS>11.2
复制代码
微信小程序
// 16rpx 是我本人 app tabbar 的内间距
padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
复制代码
参数的具体调用视状况而定，横屏展现须要设置左右间距，竖屏展现须要设置高低间距。
当然也能够联合 min()与 max()函数在一起应用。
最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163 互相学习，咱们会有业余的技术答疑解惑
如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点 star: https://gitee.com/ZhongBangKeJi 不胜感激！
PHP 学习手册：https://doc.crmeb.com
技术交换论坛：https://q.crmeb.com