移动端安全距离

311 阅读2分钟

最近重写了一下小程序的设备列表页;哦吼,完蛋,在iphoneX以上系列的手机,列表最后一项与底部的小横线重叠了(虽然先前的代码已经解决了这个问题,显而易见,我现在已经完全忘了)

image.png

所以,有问题还是要记录一下才行。唉,话不多说,开干吧!

方法

方法1:小程序方面,使用官方提供的API wx.getSystemInfo 中的 safeArea 进行解决

方法2:使用css环境变量函数env()constent()

安全区域概念

安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。 现在手机外观形状样式丰富,安全区域是为了能让网页内容不被手机的某些功能所遮挡内容,能够更完整显示。

image.png

上图是网页版中安全区域(图片来源参考)

方法1--wx.getSystemInfo

wx.getSystemInfo微信小程序官方的API,目的是为了获取 系统信息;

获取信息内容中,尤为关注safeArea属性

属性说明其他
left安全区域左上角横坐标
right安全区域右下角横坐标
top安全区域左上角纵坐标从 screenHeight = 0 开始计算
bottom安全区域右下角纵坐标从 screenHeight = 0 开始计算
width安全区域宽度
height安全区域高度bottom - top = height

理解为如下图:

image.png

主要分为两种情况

情况类型说明其他
一般情况下手机safeArea.bottom == screenHeight不用设置安全距离
iphoneX情况下的手机safeArea.bottom != screenHeight需要设置安全距离

因此在小程序中的安全距离计算如下:

bottomDistance = screenHeight - safeArea.bottom

方法2--env()

env()constant(),是IOS11新增特性,Webkit的css函数,用于设定安全区域与边界的距离。 constant()好像不再推荐使用,所以下文重点是env()

env()  CSS函数以类似于 var 函数和 custom properties的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于,环境变量除了由用户代理定义而不是由用户定义外,还被全局作用在文档中,而自定义属性则限定在声明它们的元素中。

定义变量

定义变量
safe-area-inset-top
safe-area-inset-right
safe-area-inset-bottom
safe-area-inset-left

注意点

<!-- 必须在meta设置如下属性 -->
** viewport-fit=cover" **

<meta name="viewport" content="... viewport-fit=cover">

<style>
body {
    padding-bottom: constent(safe-area-inset-bottom); /*IOS < 11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*IOS > 11.2*/
    /* 因为只是为了避开底部横线,所以使用 safe-area-inset-bottom 即可*/
}
</style>

结语

以上内容加入自己的一些理解,如有问题恳请指出,谢谢!