预热

在IOS11中Webkit新增了两个的 css 函数，分别是 env() 和 constant()，他们的作用是：用于设定安全区域与边界的距离，可以在 iPhone X 等的无边框显示屏上精美地显示您现有的网站，内容会自动插入显示屏的安全区域内，因此不会被圆角或设备的传感器外壳遮挡。

之所以写了constant和env两种 是因为ios11.2版本以后constant废弃，env生效，所以写 2 种是为了兼容所有 ios 版本。

注意：

1. 在 H5 调用的时候，需要网页设置<meta name="viewport" content="... viewport-fit=cover">的时候才会生效。

2. 在 微信小程序 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 再 envpadding-bottom: calc(8px + constant(safe-area-inset-bottom));// 兼容 IOS<11.2padding-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