背景
- 公司專案開發中，發現iPhoneX上吸底元素存在被小黑條遮擋的問題
原因
- 在蘋果 iPhoneX 、iPhone XR等機型上，物理Home鍵被取消，改為底部小黑條替代home鍵功能,從而導致吸底元素會被小黑條遮擋覆蓋的問題
解決方案
- 使用已知底部小黑條高度為34px/68rpx機型適配(不建議)
- 使用微信官方API，getSystemInfo()中的safeArea物件進行適配（建議）
- 使用蘋果官方推出的css函式env()、constant()來適配 （建議）
安全區域
看看圖就明白了，中間綠色區域即為安全區域。也就是說，適配安全區域也就是讓小程式或者H5的內容顯示在綠色區域部分。
第一種，使用已知安全距離進行適配34px/68rpx(不建議)
小程式app.js檔案中判斷獲取當前裝置機型，如果是iphoneX系列機型，那麼設計到底部時，則考慮設定底部按鈕或選項卡的margin-bottom、padding-bottom、height等，或者新增一個div來佔位小黑條的位置。
第二種 getSystemInfo()
-
1 使用wx.getSystemInfoSync()中的screenHeight和safeArea物件的bottom屬性判斷
這裡使用screenHeight是獲取螢幕的高度，因為bottom是以螢幕左上角為原點開始計算的，所以需要的是螢幕高度，對比screenHeight和safeArea，如果相等則說明不需要適配，不相等則需要適配。
`const isIPhoneX = () => {let screenHeight = wx.getSystemInfoSync().screenHeight
let bottom = wx.getSystemInfoSync().safeArea.bottom
return screenHeight !== bottom
}`
注意 isIPhoneX 返回true則代表不想等，需要進行適配
底部選項卡或吸底元素樣式判斷
<view class=" {{isIPhoneX ? 'marginB' : ''}}">底部選項卡或吸底元素</view>
- 2 safeArea物件獲取底部小黑條的高度,全域性儲存使用
第三種 使用蘋果官方推出的css函式env()、constant()來適配 （建議）我也用的這種
- env()和constant()，是IOS11新增特性，Webkit的css函式，用於設定安全區域與邊界的距離，有4個預定義變數：
- safe-area-inset-left：安全區域距離左邊邊界的距離
- safe-area-inset-right：安全區域距離右邊邊界的距離
- safe-area-inset-top：安全區域距離頂部邊界的距離
- safe-area-inset-bottom ：安全距離底部邊界的距離
這裡我們只需要關注safe-area-inset-bottom就行了
而env()和constant()函式有個必要的使用前提，H5網頁設定viewport-fit=cover的時候才生效，小程式裡的viewport-fit預設是cover
-
使用案列
下圖為一個吸底元素，在iphoneX真機上小黑條會遮擋，大概長這樣
-
解決方案
`.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/
}`