最近重写了一下小程序的设备列表页;哦吼,完蛋,在iphoneX以上系列的手机,列表最后一项与底部的小横线重叠了(虽然先前的代码已经解决了这个问题,显而易见,我现在已经完全忘了)
所以,有问题还是要记录一下才行。唉,话不多说,开干吧!
方法
方法1:小程序方面,使用官方提供的API wx.getSystemInfo
中的 safeArea 进行解决
方法2:使用css环境变量函数env()
、constent()
安全区域概念
安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。 现在手机外观形状样式丰富,安全区域是为了能让网页内容不被手机的某些功能所遮挡内容,能够更完整显示。
上图是网页版中安全区域(图片来源参考)
方法1--wx.getSystemInfo
wx.getSystemInfo
是微信小程序官方的API,目的是为了获取 系统信息;
获取信息内容中,尤为关注safeArea
属性
属性 | 说明 | 其他 |
---|---|---|
left | 安全区域左上角横坐标 | |
right | 安全区域右下角横坐标 | |
top | 安全区域左上角纵坐标 | 从 screenHeight = 0 开始计算 |
bottom | 安全区域右下角纵坐标 | 从 screenHeight = 0 开始计算 |
width | 安全区域宽度 | |
height | 安全区域高度 | bottom - top = height |
理解为如下图:
主要分为两种情况
情况类型 | 说明 | 其他 |
---|---|---|
一般情况下手机 | 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>
结语
以上内容加入自己的一些理解,如有问题恳请指出,谢谢!