h5页面适配iPhone X的方法

项目接近尾声，测试时突然想起还有iphoneX需要适配，虽然页面都是自适应，但是由于iPhone X的特殊性，还是需要特殊对待。因为这个h5项目嵌入在原生项目中，适配就会有有种方式：1.在原生中用原生的的方法适配 2.在前端页面中用h5的方式适配。

一.原生适配iphoneX

原生适配很简单，查看机型图：

image

只要用

#define KIsiPhoneX ([UIScreen mainScreen].bounds.size.height>800.0f

判断是iPhone X的机型时，就在控制器的顶端，和底部留出 44px和34px的距离，然后webView装在这个控制器内就OK！

优点：在原生中适配，h5页面不用更改任何一句代码。

缺点：1)意味着如右图某些通栏页面无法实现， image

      2）顶部和底部显色固定，无法适应页面颜色，（王者荣耀用链接地址传递参数的形式在原生中完美适配，不太明白原理）

---

** 一.h5页面适配iphoneX**

** 1.viewport-fit适配方案**

PhoneX的适配，在iOS 11中采用了viewport-fit的meta标签作为适配方案；viewport-fit的默认值是auto。css 函数 env() 和 constant()这两个函数都是 webkit 中 css 函数，可以直接使用变量函数，只有在 webkit 内核下才支持

env 函数

必须在 ios >= 11.2 才支持

constant 函数

必须 ios < 11.2 支持

viewport-fit取值如下：

image

safe-area-inset-top ：视口顶部到安全区域的距离（以CSS像素为单位）,一般情况下是 0。

safe-area-inset-right ：视口最右边到安全区域的距离（以CSS像素为单位）,一般情况下是 0。

safe-area-inset-left ：视口最左边到安全区域的距离（以CSS像素为单位）在刘海全屏的时候 top 为 88px。

safe-area-inset-bottom ：视口底部到安全区域的距离（以CSS像素为单位）刘海全屏的条件下是 34px。

constant() 是CSS的函数，可以把以上几个距离转换成我们常用的属性值。

1. 当我们设置viewport-fit:contain,也就是默认的时候时;设置safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等参数时不起作用的。

2).当设置viewport-fit:cover时，具体使用方法为

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

image.gif

body {
  padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  padding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
  padding-left: env(safe-area-inset-left); //如果未竖屏时为0
  padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
  padding-right: env(safe-area-inset-right); //如果未竖屏时为0
  padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34px
  padding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高度 34px      
}

2.媒体查询

@media screen and (device-width:375px) and (device-height:812px){
//在这里做iPhone X的判断
 // #app {
    //margin-top: 88px;
  //}
}

3.@supports 隔离兼容模式

@supports (bottom: env(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
 /*在这里做iphoneX的判断*/
  /*#app {*/
    /*margin-top: 88px;*/
  /*}*/
}