预热在IOS11中，Webkit新增了两个css函数，分别是env()和constant()，它们的作用是：用于设置安全区域DistancefromBorders来显示你的现有网站在iPhoneX等无边框显示屏上精美呈现，内容自动插入显示屏的安全区域内，因此不会被圆角或设备的传感器外壳遮挡。之所以写constant和env两种，是因为ios11.2版本之后，constant被废弃，env生效，所以写了两种，兼容所有ios版本。注意：H5调用时，只有在网页设置时才会生效。微信小程序中viewport-fit默认是cover的，我们不需要额外设置。env()CSS函数以类似于var和自定义属性的方式将用户代理定义的环境变量值插入到您的CSS中。不同之处在于，环境变量除了由用户代理而不是用户定义外，还局限于文档的全局范围，而自定义属性的范围仅限于声明它们的元素。env()和constant()函数分别接受4个参数：safe-area-inset-left：安全区域与左边界的距离safe-area-inset-right：安全区域与右边界的距离safe-area-inset-top：安全区域与顶部边界的距离safe-area-inset-bottom：安全区域与底部边界的距离/使用四个安全区域inset值，没有回退值/env(safe-area-inset-top);env(safe-area-inset-right);env(safe-area-inset-bottom);env(safe-area-inset-left);/使用它们具有回退值/env(safe-area-inset-top,20px);环境（安全区域插入右，1em）；环境（安全区域插入底部，0.5vh）；环境（安全区域插入左，1.4rem）；复制如图代码：实际操作h5//Constantfirstandthenenvpadding-bottom:calc(8px+constant(safe-area-inset-bottom));//兼容IOS<11.2padding-bottom:calc(8px+env(safe-area-inset-bottom));//兼容IOS>11.2复制代码微信小程序//16rpx是我自己的apptabbar的内间距padding-bottom:calc(16rpx+constant(safe-area-inset-bottom));padding-bottom:calc(16rpx+环境（安全区域插入底部））；拷贝代码参数的具体调用视情况而定。横屏显示需要设置左右间距，竖屏显示需要设置上下间距。当然，它也可以与min()和max()函数结合使用。最后，如果您觉得这篇文章对您有点帮助，请点个赞。或者可以加入我的开发交流群：1025263163互相学习，我们会有专业的技术解答。如果您觉得这篇文章对您有用，请给我们的开源项目一个小星星：https://gitee。com/中邦科技非常感谢！PHP学习手册：https://doc.crmeb.com技术交流论坛：https://q.crmeb.com
