小程序以及H5頁(yè)面上IphoneX底部安全區(qū)域小黑條適配問(wèn)題
背景
- 公司項(xiàng)目開(kāi)發(fā)中，發(fā)現(xiàn)iPhoneX上吸底元素存在被小黑條遮擋的問(wèn)題
原因
- 在蘋果 iPhoneX 、iPhone XR等機(jī)型上，物理Home鍵被取消，改為底部小黑條替代home鍵功能,從而導(dǎo)致吸底元素會(huì)被小黑條遮擋覆蓋的問(wèn)題
解決方案
- 使用已知底部小黑條高度為34px/68rpx機(jī)型適配(不建議)
- 使用微信官方API，getSystemInfo()中的safeArea對(duì)象進(jìn)行適配（建議）
- 使用蘋果官方推出的css函數(shù)env()、constant()來(lái)適配 （建議）
安全區(qū)域
看看圖就明白了，中間綠色區(qū)域即為安全區(qū)域。也就是說(shuō)，適配安全區(qū)域也就是讓小程序或者H5的內(nèi)容顯示在綠色區(qū)域部分。
第一種，使用已知安全距離進(jìn)行適配34px/68rpx(不建議)
小程序app.js文件中判斷獲取當(dāng)前設(shè)備機(jī)型，如果是iphoneX系列機(jī)型，那么設(shè)計(jì)到底部時(shí)，則考慮設(shè)置底部按鈕或選項(xiàng)卡的margin-bottom、padding-bottom、height等，或者添加一個(gè)div來(lái)占位小黑條的位置。
第二種 getSystemInfo()
-
1 使用wx.getSystemInfoSync()中的screenHeight和safeArea對(duì)象的bottom屬性判斷
這里使用screenHeight是獲取屏幕的高度，因?yàn)閎ottom是以屏幕左上角為原點(diǎn)開(kāi)始計(jì)算的，所以需要的是屏幕高度，對(duì)比screenHeight和safeArea，如果相等則說(shuō)明不需要適配，不相等則需要適配。
`const isIPhoneX = () => {
let screenHeight = wx.getSystemInfoSync().screenHeight
let bottom = wx.getSystemInfoSync().safeArea.bottom
return screenHeight !== bottom
}`
注意 isIPhoneX 返回true則代表不想等，需要進(jìn)行適配
底部選項(xiàng)卡或吸底元素樣式判斷
<view class=" {{isIPhoneX ? 'marginB' : ''}}">底部選項(xiàng)卡或吸底元素</view>
-
2 safeArea對(duì)象獲取底部小黑條的高度,全局存儲(chǔ)使用
第三種 使用蘋果官方推出的css函數(shù)env()、constant()來(lái)適配 （建議）我也用的這種
-
env()和constant()，是IOS11新增特性，Webkit的css函數(shù)，用于設(shè)定安全區(qū)域與邊界的距離，有4個(gè)預(yù)定義變量：
- safe-area-inset-left：安全區(qū)域距離左邊邊界的距離
- safe-area-inset-right：安全區(qū)域距離右邊邊界的距離
- safe-area-inset-top：安全區(qū)域距離頂部邊界的距離
- safe-area-inset-bottom ：安全距離底部邊界的距離
這里我們只需要關(guān)注safe-area-inset-bottom就行了
而env()和constant()函數(shù)有個(gè)必要的使用前提，H5網(wǎng)頁(yè)設(shè)置viewport-fit=cover的時(shí)候才生效，小程序里的viewport-fit默認(rèn)是cover
-
使用案列
下圖為一個(gè)吸底元素，在iphoneX真機(jī)上小黑條會(huì)遮擋，大概長(zhǎng)這樣
-
解決方案
`.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 /
}`
注意 constant與env順序不能改變，先constant再env
