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中。
H5:IOS刘海屏适配相关推荐
- h5 iOS 刘海屏适配
之前做app内嵌页时,按照机型做了齐刘海适配,到现在iPhone12发布后,发现ios 齐刘海机型很多,所以按照机型适配有点繁琐,统一修改如下. 先看一下各个机型以及分辨率:https://www.t ...
- Unity 一分钟学会适配IOS刘海屏
IOS刘海屏适配 项目上线了总免不了适配问题,Unity UGUI的锚点针对于Andorid平台的适配还是很不错的,只需调整Match为1 即可让渲染的画面处于屏幕的安全位置之内, 但到了苹果平台上往 ...
- iPhoneX适配问题 iOS刘海屏 安全区域处理 IOS小黑条处理 IOS兼容处理
IphoneX适配问题 iOS刘海屏 安全区域处理 前言 适配前需要了解的几个关键字 安全区域 viewport-fit env() 和 constant() 适配的方法 第一步 设置网页在可视区的布 ...
- Android 系统(70)---Android刘海屏适配方案
Android刘海屏适配方案 什么是刘海屏 随着iPhone X发布,国内一些厂商也推出了刘海屏手机,即将发布的Android p也提供了对刘海屏的支持.so,我们的app也要提前做好适配. 屏幕的正 ...
- Android P(3)---Android P版本刘海屏适配指南
Android P版本刘海屏适配指南 Android P预览版增加了很多亮点新特性,其中最接地气.最直观的改变当属适配了类似于华为P20的顶部凹槽屏幕设计这一项,俗称刘海屏. 在开发者模式中,Andr ...
- Android刘海屏适配全方案(华为、小米、Vivo、Oppo)
前言 目前市面上的刘海屏和水滴屏手机越来越多了,颜值方面是因人而异,有的人觉得很好看,也有人觉得丑爆了,我个人觉得是还可以.但是作为移动开发者来说,这并不是一件好事,越来越多异形屏手机的出现意味着我们 ...
- 详解Android刘海屏适配
Apple一直在引领设计的潮流,自从 iPhone X 发布之后,"刘海屏" 就一直存在争议,本以为是一个美丽的错误(Bug),却早就了一时间"刘海屏"的模仿潮 ...
- Android 刘海屏 适配
Android 刘海屏 适配主要有三种方案 第一,LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT 模式 在该模式下,如果当前应用没有设置页面全屏显示,则显示逻辑,与正常情况 ...
- Android刘海屏适配
Android刘海屏适配 全屏模式下刘海屏黑边(内容区域下挫)问题,支持国国内 华为,小米,OPPO/VIVIO 非原生9.0系统的刘海屏 刘海屏是Android9.0之后才支持的 详见源码 andr ...
最新文章
- 基于深度学习的交互式问答研究综述
- Mybatis基础:增删改查、模糊查询、多条件查询
- matlab点云配准(总结性)
- 2012年我读过的十本好书
- vgh电压高了有什么_智能变频电源的功能是什么?
- LeetCode 105. 已知前序中序 求二叉树
- email邮件中 内嵌iframe_Python+Selenium执行结果,封装函数,用Python自动发送SMTP邮件...
- elementUI日期选择器:仅设置可选择时间区间
- 官方正式预热小米10S:哈曼卡顿加持小米有史以来音质最好的手机
- 爬虫介绍+Jupyter Notebook
- 64qam带宽计算_滚降系数为0.5的64QAM信号,数据速率若为_____,则带宽为______。
- 六、CSS3的美化字体与段落
- Spring Cloud Netflix之Euraka Server注册中心
- HTTP协议相关的网络经典五层模型
- 关于在数据库中如何存储时间这件事
- php微信使用腾讯地图进行定位,微信小程序在腾讯地图上选择定位
- es6 javascript 尾调用
- 人工智能(AI)在未来的发展趋势和应用场景
- 总结Python中的字符串格式化
- 苹果用什么蓝牙耳机好?适合苹果的音乐蓝牙耳机推荐
热门文章
- 中飞院计算机学院毕业后侍遇,【毕业季·计算机学院】年华在指间流动,出门已是江湖...
- mysql 子查询索引_mysql select中子查询中使用强制索引的优化案例
- 无线设置 用户_无线路由器设置网址是多少
- 四川企立方:拼多多百亿补贴怎么样
- 江苏大学2006年程序设计压轴题 编程打印如下图形,中间一行英文字母由输入得到,图形随输入英文字母的变化而变化。例如,输入英文字母A得到的图形为:A
- DWG文件打开很卡怎么办?一招叫它“瘦身”成功~
- Linux用户、组和权限管理
- 全军出击莫名消失,竟是为新游使命召唤做铺垫?天美这边操作你怎么看
- 社区医院与三级医院的检查检验贡献
- php lav,PotPlayer1.7.21129便携懒人包分享(madVR+LAV+ini设置)