今天在编写小程序页面时发现，在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'}}">
复制
最终显示效果
