锐客网

  1. 首页 > it技术 > >

微信小程序与webview关于iphone X的兼容设置

前端

预热
在IOS11中Webkit新增了两个的css函数，分别是 env() 和 constant()，他们的作用是：用于设定安全区域与边界的距离，可以在 iPhone X 等的无边框显示屏上精美地显示您现有的网站，内容会自动插入显示屏的安全区域内，因此不会被圆角或设备的传感器外壳遮挡。
之所以写了constant和env两种 是因为ios11.2版本以后constant废弃，env生效，所以写2种是为了兼容所有ios版本。
注意：
在 H5 调用的时候，需要网页设置的时候才会生效。
在 微信小程序 viewport-fit默认是cover，所以我们不需要额外设置。
微信小程序与webview关于iphone X的兼容设置
文章图片

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);
复制代码
如图所示：
微信小程序与webview关于iphone X的兼容设置
文章图片

实操
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不胜感激 ！
【微信小程序与webview关于iphone X的兼容设置】PHP学习手册：https://doc.crmeb.com
技术交流论坛：https://q.crmeb.com

    推荐阅读


    上一篇：面试官（听说你熟悉OkHttp原理（））

    下一篇：VuePress|VuePress 博客优化之 last updated 最后更新时间如何设置