一、背景
开发混合App，关于iPhoneX刘海的适配，应该是前端H5做，还是原生APP做呢？个人觉得原生APP做比较靠谱，毕竟原生知道是什么机型，而CSS媒体查询觉得很难做到完美（问题一是工具条高度难以确定，问题二可能存在相同的媒体参数）。但是由于iOS原生开发的适配也老存在问题，交流麻烦，所以尝试在H5上做适配，希望不足的可以得到建议。
二、方案
百度后，总结主要有两种想法。
方案1（本文采用）：使用@media 媒体查询尺寸
1125 × 2436 iPhoneX, XS Default-812h@3x
828 x 1792 iPhoneXR Default-828h@2x
1242 x 2688 iPhoneX Max Default-1242h@3x
方案2（不可用）：根据是否有支持ios11 增加新特性安全区域来判断是不是iphoneX，判断的是系统，不是机型，所以对于其他安装了iOS11以上的机子会有问题。
三、代码实现
1、iOS开发人员提供全屏的webview
2、viewport-fit meta标签设置cover。
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" />
3、媒体查询
html{
height: 100%;
width: 100%;
overflow: hidden;
/*和header背景颜色一样，使工具条和header背景颜色一样*/
background-color: #fff !important;
}
/*top 这里直接置顶，是因为项目需求。若要为工具条的高度，比较麻烦，所以建议原生做适配*/
body {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/*兼容iphoneX*/
/*判断是否是iphoneX，使用@media 媒体查询尺寸*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
body {
top: constant(safe-area-inset-top);
bottom: constant(safe-area-inset-bottom);
left: constant(safe-area-inset-left);
right: constant(safe-area-inset-right);
}
}
/*方案2：不可用*/
/*@supports 隔离兼容模式，根据是否有支持ios11 增加新特性来判断是不是iphoneX*/
/* @supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
body {
top: constant(safe-area-inset-top);
bottom: constant(safe-area-inset-bottom);
left: constant(safe-area-inset-left);
right: constant(safe-area-inset-right);
}
}*/
四、兼容前和兼容后对比
五、待改进
本代码只媒体查询iphoneX，对于XS、X MAX、XR还需要增加媒体查询。
六、相关资料
对于iphoneX头部遮挡问题，苹果公司增加了一种方法来将安全区域布局指南暴露给CSS。他们添加了一个类似于CSS变量的概念，称为CSS常量。这些像系统设置的CSS变量，不能被覆盖，可以通过CSS中的constant()函数来访问，该函数已被提交给CSS工作组进行标准化。
1、 iOS11中viewport-fit三个取值：
| 值 | 描述 |
|---|---|
| auto | 页面内容显示在safe area内。viewprot-fit:auto等同于viewport-fit:contain |
| contain | 页面内容显示在safe area内。viewport-fit:contain |
| cover | 页面内容充满屏幕。viewport-fit:cover |
2、 4个布局常数：生效前提是viewport-fit:cover
constant(safe-area-inset-top)：从视口顶部的安全区域插入量(以CSS像素为单位)。
constant(safe-area-inset-bottom)：从视口底部的安全区域插入量(以CSS像素为单位)。
constant(safe-area-inset-left)：从视口左侧的安全区域插入量(以CSS像素为单位)。
constant(safe-area-inset-right)：从视口右侧的安全区域插入量(以CSS像素为单位)。
参考资料：
关于H5页面在iPhoneX适配
iPhone X的Web设计
iPhone X适配没那么复杂，但也不是看上去这么简单
剖析 iOS 11 网页适配问题
iPhone X(10)屏幕分辨率与适配
iPhone X 适配手Q H5 页面通用解决方案
