小程序对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'}}">

最终显示效果

更多相关文章

随机推荐