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）影响，如下图绿色区域：

因此做好适配，必须保证页面可视、可操作区域是在安全区域内。

适配第一步

<meta name="viewport" content="width=device-width,viewport-fit=cover">

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中。