iPhoneX、iPhoneXS、iPhoneXS Max与iPhoneXR 底部吸底按钮适配

移动端真的是幺蛾子比较多，苹果抽风出的这几款手机都带bar  为了处理这类问题，必须在页面上做相应的处理

比如吸底按钮 或者其他元素需要给最后一个元素添加一个距离底部的高度 尺寸一般是34px

通过js来判断是否是这四种手机的类型  代码如下：

  // iPhone X、iPhone XS
  var isIPhoneXSS = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
  // iPhone XS Max
  var isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
  // iPhone XR
  var isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;
  if (isIPhoneXSS || isIPhoneXSMax || isIPhoneXR) {
    $(".fix-b-box").addClass("iphoneXXSXRMAX")
  }

这种方法肯定不是理想的，那么官网提供了如下方法：

第一步：设置网页在可视窗口的布局方式
新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui, viewport-fit=cover" />

css：添加
@supports(bottom: env(safe-area-inset-bottom)) {
  .iphoneX-fix {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

这个meta标签中最关键的一个是viewport-fit=cover  这样，x系列手机下边那个bar属于安全区之外的，这个padding-bottom就会生效了

处理办法是在mata标签上添加viewport-fit=cover

viewport-fit有三个值可以设置

1.contain可视窗口完全包涵网页内容

2.cover 网页内容完全覆盖可是窗口

3.auto 默认值 表现和contain一致

 

viewport-fit是ios11新增的特性，同时，还给css新增了一个函数constant函数，用来设置安全区域与边界的距离 ，有四个预定义的变量

safe-area-inset-left：安全区域距离左边边界距离

safe-area-inset-right：安全区域距离右边边界距离

safe-area-inset-top：安全区域距离顶部边界距离

safe-area-inset-bottom：安全区域距离底部边界距离

 

 

 

 

这样再去测试，基本没什么问题了。

参考原文：https://mp.weixin.qq.com/s/BjqP4mKmBCyx4iOQGnC4Kw?   

京东凹凸实验室适配总结.