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的函数，可以把以上几个距离转换成我们常用的属性值。
- 当我们设置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;*/
/*}*/
}