H5:IOS刘海屏适配

标签: Android 适配  Vue  ios  刘海屏  calc  safe area

场景

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

 

版权声明:本文为yaojie5519原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yaojie5519/article/details/103658364

智能推荐

php输出语句

php输出语句 常见的输出语句 echo(): 可以一次输出多个值,多个值之间用逗号分隔。echo是语言结构(language construct),而并不是真正的函数,因此不能作为表达式的一部分使用。 print(): 函数print()打印一个值(它的参数),如果字符串成功显示则返回true,否则返回false。 print_r(): 可以把字符串和数字简单地打印出来,而数组则以括起来的键和值...

工厂模式

简介 常见的实例化对象模式。 用工厂方法替代new操作的一种模式。 当我们使用new操作实例化对象时,调用构造函数完成初始化。若初始化仅是进行赋值等简单的操作,写入构造函数即可。但如果初始化时需要执行一长串复杂的代码,将多个工作装入一个方法,是不妥的。 创建实例与使用实例分离。将创建实例所需的大量初始化工作从基类的构造函数中分离出去。 简单工厂模式、工厂方法模式针对的是一个产品等级结构;而抽象工厂...

B1105 Spiral Matrix (画图)

B1105 Spiral Matrix (25分) //第一次只拿了21分 矩阵的长和宽,求最大因子,从sqrt(num)开始枚举. 每次循环一次,s++,t--,d--,r++ 测试点四运行超时,是因为输入一个数字的时候,需要直接输出这个数字。//1分 测试点二运行超时,最后一个数字不必再while循环一次,直接输出即可。//3分 最后一个测试点卡了好久/(ㄒoㄒ)/~~ 螺旋矩阵...

Java基础=>String,StringBuffer与StringBuilder的区别

字符串常量池 什么是字符串常量池? JVM为了减少字符串对象的重复创建,其维护了一块特殊的内存,这段内存被称为字符串常量池(存储在方法区中)。 具体实现 当代码中出现字符串时,JVM首先会对其进行检查。 如果字符串常量池中存在相同内容的字符串对象,如果有,则不再创建,直接返回这个对象的地址返回。 如果字符串常量池中不存在相同内容的字符串对象,则创建一个新的字符串对象并放入常量池,并返回新创建的字符...

java调用其他java项目的Https接口

项目中是这样的: 用户拿出二维码展示,让机器识别二维码, 机器调用开门的后台系统接口, 然后开门的后台系统接口需要调用管理系统的接口, 管理系统需要判断能不能开门.这两个系统是互相独立的.当时使用http调用是没有问题的.当时后来要求必须用https.废话不说,直接代码: 我的项目中调用的是 HttpsUtils.Get(utlStr) 这个接口 开门系统接口如下图:   管理系统的接口...

猜你喜欢

Hadoop1.2.1全分布式模式配置

一 集群规划 主机名            IP                               安装的软件 &nbs...

Go语言gin框架的安装

尝试安装了一下gin,把遇到的一些小问题来记录一下 安装步骤 首先来看看官方文档,链接点这里 可以看到安装步骤很简单,就一句话 在命令行中输入这句话运行等待就好。 问题来了,因为墙的问题,go get会很慢,所以命令行里面半天什么反应也没有,不要急,慢慢等着就会看到gin-gonic/gin这个目录出现 这个时候命令行还是没有结束,表示还在下一些东西。有的时候可能心急的人就停了(比如我),然后写个...

uni-app表单组件二

input(输入框) 属性名 类型 说明 平台差异 value String 输入框的初始内容 type String input 的类型 password Boolean(默认false) 是否是密码类型 placeholder String 输入框为空时占位符 placeholder-style String 指定 placeholder 的样式 placeholder-class Strin...

深入理解 JavaScript 代码执行机制

深入理解 JavaScript 代码执行机制 前言 本文仅为个人见解,如有错误的地方欢迎留言区探讨和指正。 1、餐前甜品 如下是一段 JavaScript 代码,如果你毫不犹豫的说出代码执行顺序。那么请直接滚动到底部,留下你的足迹,接受膜拜。如果还不是很确定,那么请往下继续查看。 2、磨刀不误砍柴工(了解浏览器原理) (1) 进程和线程 进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小...

Centos7下配置DRBD Cluster扩展节点

操作环境 CentOS Linux release 7.4.1708 (Core) DRBDADM_BUILDTAG=GIT-hash:\ ee126652638328b55dc6bff47d07d6161ab768db\ build\ by\ [email protected]\,\ 2018-07-30\ 22:23:07 DRBDADM_API_VERSION=2 DRBD_KERNEL_VER...