小程序以及H5頁面上IphoneX底部安全區域小黑條適配問題

背景

• 公司項目開發中，發現iPhoneX上吸底元素存在被小黑條遮擋的問題

緣由

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

解決方案

1. 使用已知底部小黑條高度爲34px/68rpx機型適配(不建議)
2. 使用微信官方API，getSystemInfo()中的safeArea對象進行適配（建議）
3. 使用蘋果官方推出的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/

}`

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