关于iphoneX的适配和微信下状态栏的回退处理。

iphoneX的适配

---

• 问题描述
  • iphonex 下底部会出现小黑条，遮挡页面的布局和点击事件，尤其是 fixed 固定底部的按钮。
• 解决思路
  • 在需要的地方留出小黑条的位置高度。
• 解决过程
  • 网上查资料，css 解决方案，使用苹果官方推出的css函数env()、constant()来适配 safe-area-inset-bottom （安全距离底部边界的距离）
    • 第一步，设置viewport viewport-fit=cover

    • 第二步，设置样式

        @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);
             }
          }
      

  • 结果
    不知道哪里出现问题了，我的 padding-bottom 获取的值一直是 0 ，很疑惑。所以这个解决方案就搁置了，换其他的思路去解决。（网上很多都能解决，方法应该没问题，只是我这边不知道出现什么其他的状况，没能解决。）
• 第二个思路只能是通过 js 去判断增加一个高度了
  • 第一步是判断 ios 并且是 iphoneX 系列的设备

      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()  // 调整页面 css 函数
         window.onresize = resize  // 这个是处理微信，页面滚动时隐藏状态栏时的情况。
       } else if (screen.height == 896 && screen.width == 414) { // iphoneX其他系列
         barH = 30  // 加高一点高度，根据实际情况改变
         barcontrol()
         window.onresize = resize
       } 
     }
    

  • 第二步，调整 css 样式。

      var barH = 28  // 设置底部的高度，根据实际情况改变
      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')
    }
    

• 结果
  貌似能满足需求，实际测试的时候，第一次也没问题。但是，出现一个新的状况，就是微信的回退状态栏，在 ios 系统下才会出现左右箭头的回退，很烦人，而且滑动的时候会消失，更加烦人了。既然问题出现了，那就尝试着干掉它。

ios 系统微信打开 H5 页面的回退状态栏

---

• 问题描述
  • 没有回退记录的时候，页面很和谐，完美解决适配的问题，但是有回退的时候，占位高度就显得很突兀。
  • 滚动的时候又会隐藏状态栏，占位高度又需要有值。
• 解决思路
  • 有回退的时候，占位高度为 0，反之，高度不为 0

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

  • 状态栏显示的时候。占位高度为 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 了。如果有更好的解决方案，记得私信我哦，一起学习，一起进步。