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

预热
在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

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

webview 个人小程序_微信小程序新增Webview它是什么东西？
原标题:微信小程序新增Webview,它是什么东西? 今天刚刚给客户做完案子,正准备去睡觉.2017 今天刚刚给客户做完案子,正准备去睡觉.2017年11月3日 11:29看到了微信公众平台推送的小程 ...
微信小程序与webview H5交互（内嵌H5跳转原生页面）
在开发中,使用web-view组件内嵌H5页面是非常常见的,但很多人不知道webview内嵌H5如何与原生小程序交互.下面介绍下实现微信小程序与webview H5交互的方法. web-view功能 ...
微信小程序非webview分享给好友及生成分享海报
微信小程序非webview分享给好友及分享海报 UI展示点击分享显示分享sheet: 点击生成海报,展示海报预览图片: 组件目录结构: 代码 works文件 woks.json中引入: " ...
微信小程序在web-view页面做分享，并且把分享的参数传递给小程序
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票本demo实现的功能,微信小程序给h5传参,h5给小程序传参实现代码: <!--index.wxm ...
微信小程序中WebView中原生组件限制问题解析
背景在微信的文档中有一个章节说明了『原生组件的使用限制』有这么一段话『由于原生组件脱离在 WebView 渲染流程外,因此在使用时有以下限制:原生组件的层级是最高的,所以页面中的其他组件无论设 ...
微信小程序刷新webview页面问题
一.背景我这边小程序的首页使用的是web-view组件.相当于直接引入了url,访问写好的h5页面即可.比着原生的小程序页面来说,方便了不少,但是刷新是个问题.这里记录一下刷新的方法. 二.微信小程 ...
微信小程序中嵌套html_微信小程序：web-view嵌套H5实现微信支付功能解决方案及填坑...
ab7117c7d4947210c39e126a01d23ede.jpg 最近一个多月加班比较严重,偶尔休息一天也是在补睡眠+陪家人,比较长时间没有来进行总结记录了.今天不加班,开始为这段时间做的东西 ...
【微信小程序】web-view 无法打开该页面不支持打开
本文相关文献: https://developers.weixin.qq.com/community/develop/doc/00084a350b426099ab46e0e1a50004?%2Fblo ...
微信小程序中web-view调用微信支付
在原来的H5支付页面中加个判断前提需要添加这个: <script type="text/javascript" src="https://res.wx.qq.co ...

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

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

最新文章

热门文章