H5：IOS刘海屏适配
场景
app部分页面使用H5混合开发，框架使用的是Vue。页面基本在Android上展示正常，在ios（iPhone 7、iPhone X、iPhone 11）上会出现两个问题：
(1) 顶部标题栏即便是fixed定位，top为0，依然会留有一点缝隙，滑动的时候刘海左右两边可见滑动内容。
(2) H5页面底部太贴近手机底部小黑条。
三种方案
根据问题场景，我想到了以下三个解决方案，并作了一一尝试：
机型适配、布局适配、app适配
方案对比
机型适配
方法1：屏幕尺寸适配
/* iphone x / xs / 11 pro*/
@media only screen and (device-width: 375px) and (device-height: 690px) and (-webkit-device-pixel-ratio: 3) {
header{
padding-top: 44px;
}
footer {
padding-bottom:34px;
}
}
/* iphone xr / 11 */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
}
/* iphone xs max / 11 pro max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
}通过媒体查询，指定尺寸的手机，上下留出一定边距
这种方法比较笨，需要对出现问题的每款机型都做适配，而且需要知道对应机型的真实尺寸。不太推荐该方法，不过应该也是比较有效的方法。
然而尝试发现，未解决问题。后来发现是页面布局本身原因导致未生效。
方法2：Safe Area适配
iPhone X之后，iphone上多了一个安全区域的概念，安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图绿色区域：
因此做好适配，必须保证页面可视、可操作区域是在安全区域内。
适配第一步
viewport-fit特性主要有三个值可设
-
contain: 可视窗口完全包含网页内容（左图）
-
cover：网页内容完全覆盖可视窗口（右图）
-
auto：默认值，跟 contain 表现一致
网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。
适配第二步
body{
padding-top: env(safe-area-inset-top);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
}对page页面设置安全区域边距。
constant() 以及 safe-area-inset-top safe-area-inset-right safe-area-inset-bottom safe-area-inset-left 是 iOS 11 webview 新增加的特性。
四个特性变量默认值如下：
safe-area-inset-top=0，
safe-area-inset-right=44px ，
safe-area-inset-bottom=21px，
safe-area-inset-left=44px
布局适配
H5页面大致可分为三部分：头部标题栏header，底部悬浮按钮footer，中间内容区域。
原先的实现方法为，header和footer都是fixed定位，中间默认为static定位。
之所以在ios上出现上面的问题，从布局上讲，是刘海区域和底部区域为可视区域。
那么修改布局也可实现。主要思路为：
页面滑动禁止，内容区域设置可滑动，即page的overflow设置为hidden，内容区域设置为scroll或auto。不过内容区域的高度设置应该在header和footer之间。
内容区域高度的计算方法，通过calc函数计算可得：
height:calc(100% - header高度 - footer高度);依照思路，几次调整布局方式，页面使用relative，header和footer尝试过absolute定位实现，中间内容区域使用relative或fixed方式实现。
测试发现，确实这种方法在ios上可以实现适配。然而也带来了其他问题。
Android端使用webview为腾讯X5内核。适配后出现几个问题：
1、滑动效果不太好 ，在ios上滑动还行，在Android反而有点滑动卡顿的问题。
2、页面高度被压缩，不能完全撑开，这个很致命！设置了固定高度后，如1000px，可以实现。然而内容区域高度本就是动态的，无法固定。
初步猜测，Android端webview页页包了一层body，而它的body高度是根据内容来的，并不是宽高默认全屏。
3、对于以上calc函数动态计算高度的问题不支持，不知道是不是版本的问题。
因此，该方案可行，却会带来新的兼容问题，需要对个别特性和方法做版本的适配支持。时间有限，最终没有选择该方案。
app适配
因为H5页面是内嵌在App内，所以换种思路，只需要将H5页面限制在安全区域内即可，H5自己限定比较麻烦，可以交给app实现。对于ios来说，适配刘海屏反而相对简单些，因为不需要关心Android。
所以最终选择的也是这个方案。ios根据机型辨别是否刘海屏，刘海顶部和靠近底部小黑条默认使用白色背景，将展示区域限制在safe Area中。