小程序对IPhone全面屏手机底部黑线的安全区域处理
今天在编写小程序页面时发现，在iphoneX真机预览时，底部button会被手机底部黑线盖住一部分，
对于我这种强迫症来说，简直不能忍。
首先说下手机的安全区域
安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。
我用的手机是iphone X ，显示效果如上，为了美观和易用性，我们对手机显示进行适配
第一种方案 CSS3中的constant、env函数
page {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
两句代码就能解决ios底部安全距离问题
第二种方案 动态获取手机型号，给view加margin-bottom
1.app.js中定义全部变量
globalData: {
Modelmes: null
},
2.onLaunch获取手机型号等信息
onLaunch(options) {
wx.getSystemInfo({
success: (res) => {
//将机型存入到本地缓存 以免后期其他业务逻辑需要使用
wx.setStorageSync('Modelmes', res.model)
if (res.model === 'iPhone X' || 'iPhone XR' || 'iPhone XS Max' || 'iPhone 11' || 'iPhone 11 Pro' || 'iPhone 11 Pro Max'){
this.globalData.Modelmes = true;
}else{
this.globalData.Modelmes = false;
}
}
})
3.需要适配的页面调用
var app = getApp();
let { Modelmes } = app.globalData;
this.setData({ Modelmes });
最外层增加margin-bottom
<view style="margin-bottom:{{Modelmes?'68rpx':'0'}}">
最终显示效果
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-11-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读