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

iphoneX的适配

问题描述
- iphonex 下底部会出现小黑条，遮挡页面的布局和点击事件，尤其是 fixed 固定底部的按钮。
解决思路
- 在需要的地方留出小黑条的位置高度。
解决过程
- 网上查资料，css 解决方案，使用苹果官方推出的css函数env()、constant()来适配 safe-area-inset-bottom （安全距离底部边界的距离）
  - 第一步，设置viewport viewport-fit=cover
```
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,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 了。如果有更好的解决方案，记得私信我哦，一起学习，一起进步。