背景

• 公司項目開發(fā)中，發(fā)現(xiàn)iPhoneX上吸底元素存在被小黑條遮擋的問題

原因

• 在蘋果 iPhoneX 、iPhone XR等機型上，物理Home鍵被取消，改為底部小黑條替代home鍵功能,從而導致吸底元素會被小黑條遮擋覆蓋的問題

解決方案

1. 使用已知底部小黑條高度為34px/68rpx機型適配(不建議)
2. 使用微信官方API，getSystemInfo()中的safeArea對象進行適配（建議）
3. 使用蘋果官方推出的css函數(shù)env()、constant()來適配 （建議）

安全區(qū)域

第一種，使用已知安全距離進行適配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函數(shù)env()、constant()來適配 （建議）我也用的這種

• env()和constant()，是IOS11新增特性，Webkit的css函數(shù)，用于設定安全區(qū)域與邊界的距離，有4個預定義變量：
  • safe-area-inset-left：安全區(qū)域距離左邊邊界的距離
  • safe-area-inset-right：安全區(qū)域距離右邊邊界的距離
  • safe-area-inset-top：安全區(qū)域距離頂部邊界的距離
  • safe-area-inset-bottom ：安全距離底部邊界的距離

這里我們只需要關注safe-area-inset-bottom就行了

而env()和constant()函數(shù)有個必要的使用前提，H5網(wǎng)頁設置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 /

}`

注意 constant與env順序不能改變，先constant再env