iphoneX的適配

• 問題描述
  • iphonex 下底部會出現(xiàn)小黑條，遮擋頁面的布局和點擊事件，尤其是 fixed 固定底部的按鈕。
• 解決思路
  • 在需要的地方留出小黑條的位置高度。
• 解決過程
  • 網(wǎng)上查資料，css 解決方案，使用蘋果官方推出的css函數(shù)env()、constant()來適配 safe-area-inset-bottom （安全距離底部邊界的距離）
    • 第一步，設(shè)置viewport viewport-fit=cover

        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,viewport-fit=cover">
      

    • 第二步，設(shè)置樣式

        @supports (bottom: constant(safe-area-inset-bottom) || bottom: env(safe-area-inset-bottom)) {
          .footer {
             padding-bottom: constant(safe-area-inset-bottom);
             padding-bottom: env(safe-area-inset-bottom);
             }
          }
      

  • 結(jié)果
    不知道哪里出現(xiàn)問題了，我的 padding-bottom 獲取的值一直是 0 ，很疑惑。所以這個解決方案就擱置了，換其他的思路去解決。（網(wǎng)上很多都能解決，方法應(yīng)該沒問題，只是我這邊不知道出現(xiàn)什么其他的狀況，沒能解決。）
• 第二個思路只能是通過 js 去判斷增加一個高度了
  • 第一步是判斷 ios 并且是 iphoneX 系列的設(shè)備

      var ua = window.navigator.userAgent.toLocaleLowerCase();
      var isIOS = /iphone|ipad|ipod/.test(ua);
      if (isIOS) {
         if (screen.height == 812 && screen.width == 375) { // iphoneX
         barH = 28
         barcontrol()  // 調(diào)整頁面 css 函數(shù)
         window.onresize = resize  // 這個是處理微信，頁面滾動時隱藏狀態(tài)欄時的情況。
       } else if (screen.height == 896 && screen.width == 414) { // iphoneX其他系列
         barH = 30  // 加高一點高度，根據(jù)實際情況改變
         barcontrol()
         window.onresize = resize
       } 
     }
    

  • 第二步，調(diào)整 css 樣式。

      var barH = 28  // 設(shè)置底部的高度，根據(jù)實際情況改變
      var barcontrol = function (num){
      var h = num == 0 ? 0 : barH
      $('.spx').css('height', h+'px')  // 導航底部的占位高度，css 白色背景，一般是 0 ；iphoneX 時，是 28 個像素。
      $('body').css('padding-bottom', h+'px')
    }
    

• 結(jié)果
  貌似能滿足需求，實際測試的時候，第一次也沒問題。但是，出現(xiàn)一個新的狀況，就是微信的回退狀態(tài)欄，在 ios 系統(tǒng)下才會出現(xiàn)左右箭頭的回退，很煩人，而且滑動的時候會消失，更加煩人了。既然問題出現(xiàn)了，那就嘗試著干掉它。

ios 系統(tǒng)微信打開 H5 頁面的回退狀態(tài)欄

• 問題描述
  • 沒有回退記錄的時候，頁面很和諧，完美解決適配的問題，但是有回退的時候，占位高度就顯得很突兀。
  • 滾動的時候又會隱藏狀態(tài)欄，占位高度又需要有值。
• 解決思路
  • 有回退的時候，占位高度為 0，反之，高度不為 0

     if(history.length >1){
       barcontrol(0)
     }
    

  • 狀態(tài)欄顯示的時候。占位高度為 0，消失的時候高度不為 0

     var first = document.documentElement.clientHeight || document.body.clientHeight;
     var resize = function(){
       var getViewPortHeight = document.documentElement.clientHeight || document.body.clientHeight;
       if(+getViewPortHeight <= +first){
         barcontrol(0)
       } else {
          barcontrol()
       }
    }
    

• 至此，happy ending 了。如果有更好的解決方案，記得私信我哦，一起學習，一起進步。