场景

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

 

Logo

前往低代码交流专区

更多推荐