看看图就明白了,中间绿色区域即为安全区域。也就是说,适配安全区域也就是让小程序或者H5的内容显示在绿色区域部分。
css
小程序app.js文件中判断获取当前设备机型,若是是iphoneX系列机型,那么设计到底部时,则考虑设置底部按钮或选项卡的margin-bottom、padding-bottom、height等,或者添加一个div来占位小黑条的位置。小程序
1 使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断
这里使用screenHeight是获取屏幕的高度,由于bottom是以屏幕左上角为原点开始计算的,因此须要的是屏幕高度,对比screenHeight和safeArea,若是相等则说明不须要适配,不相等则须要适配。
`const isIPhoneX = () => {安全
let screenHeight = wx.getSystemInfoSync().screenHeight微信
let bottom = wx.getSystemInfoSync().safeArea.bottomapp
return screenHeight !== bottomiphone
}`函数
底部选项卡或吸底元素样式判断
<view class=" {{isIPhoneX ? 'marginB' : ''}}">底部选项卡或吸底元素</view>
flex
而env()和constant()函数有个必要的使用前提,H5网页设置viewport-fit=cover的时候才生效,小程序里的viewport-fit默认是cover设计
使用案列
下图为一个吸底元素,在iphoneX真机上小黑条会遮挡,大概长这样
3d
解决方案
`.detailBotoom{
position: fixed;
bottom: 0;
width: 100%;
display: flex;
height: calc(96rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
height: calc(96rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
background: #fff;
border-top: 1rpx solid #eaeef1;
z-index: 99;
padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
}`