小程序以及小程序以及H5页面上页面上IphoneX底部安全区域小黑条适配问题底部安全区域小黑条适配问题
背景背景
公司项目开发中,发现iPhoneX上吸底元素存在被小黑条遮挡的问题
原因原因
在苹果 iPhoneX 、iPhone XR等机型上,物理Home键被取消,改为底部小黑条替代home键功能,从而导致吸底元素会
被小黑条遮挡覆盖的问题
解决方案解决方案
1. 使用已知底部小黑条高度为34px/68rpx机型适配(不建议)
2. 使用微信官方API,getSystemInfo()中的safeArea对象进行适配(建议)
3. 使用苹果官方推出的css函数env()、constant()来适配 (建议)
安全区域安全区域
看看图就明白了,中间绿色区域即为安全区域。也就是说,适配安全区域也就是让小程序或者H5的内容显示在绿色区域部
分。
(此图片来源于网络,如有侵权,请联系删除! )
第一种,使用已知安全距离进行适配第一种,使用已知安全距离进行适配34px/68rpx(不建议不建议)
小程序app.js文件中判断获取当前设备机型,如果是iphoneX系列机型,那么设计到底部时,则考虑设置底部按钮或选项卡的
margin-bottom、padding-bottom、height等,或者添加一个div来占位小黑条的位置。
第二种第二种 getSystemInfo()
1 使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断
这里使用screenHeight是获取屏幕的高度,因为bottom是以屏幕左上角为原点开始计算的,所以需要的是屏幕高度,对
比screenHeight和safeArea,如果相等则说明不需要适配,不相等则需要适配。
`const isIPhoneX = () => {
let screenHeight = wx.getSystemInfoSync().screenHeight
let bottom = wx.getSystemInfoSync().safeArea.bottom
return screenHeight !== bottom
}`
评论10