h5 iOS 刘海屏适配

之前做app内嵌页时，按照机型做了齐刘海适配，到现在iPhone12发布后，发现ios 齐刘海机型很多，所以按照机型适配有点繁琐，统一修改如下。

先看一下各个机型以及分辨率：https://www.theiphonewiki.com/wiki/Models

ios中的px转pt根据设备的ppi大概是3:1/2:1/1:1转换：

4.7寸6、6s、7、8，状态栏高度为20pt，导航栏高度为44pt.
5.5寸的6p、6sp、7p、8p，状态栏高度为18pt，导航栏高度为44pt.
拥有刘海屏的X、XR、XS、XS MAX、11等一系列刘海屏，状态栏高度为44pt，导航栏高度为44pt.

综上发现：

导航栏 高度所有机型都为44pt；
状态栏 高度大致可以根据是否为刘海屏分为两类。没有刘海屏的大小机型分别为18和20pt，可以近似的看成都是20pt来处理，问题不大，有刘海屏的则统一为44pt高，跟导航栏高度相同。

适配方案：

iOS端的适配方案：Apple官方适配方案、机型区分适配、jsBridge方案

一、Apple官方适配方案：

1、在iphone x之后引入了一个新概念：“safe area（安全区域）”，安全区域指屏幕内不受圆角、齐刘海、底部小黑条等元素影响的可视窗口。如下图：

2、同时，从iOS11开始，为了适配刘海屏，Apple公司对HTML的viewport meta标签做了扩展

<meta name="viewport" content="viewport-fit=cover">

viewport-fit：

auto：默认值，跟 contain 表现一致
contain：可视窗口完全包含网页内容
cover：指页面完全充满屏幕，网页内容完全覆盖可视窗口。

适配方案：

首先通过设置<meta name="viewport" content="viewport-fit=cover">让页面充满全屏
通过Webkit内置的CSS函数，获取安全区域与各边之间的间距，然后通过padding/margin/绝对定位等方式，让页面元素展示在安全区域内。

注： Webkit在iOS11中新增CSS Functions: env( )替代constant( )，文档中推荐使用env( )，而 constant( ) 从Safari Techology Preview 41 和iOS11.2 Beta开始会被弃用。在不支持env( )的浏览器中，会自动忽略这一样式规则，不影响网页正常的渲染。为了达到最大兼容目的，我们可以 constant( ) 和 env( ) 同时使用。

padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
padding-top: env(safe-area-inset-top); /* iOS 11.2 */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);
}

使用@supports查询机型是否支持constant() / env()实现兼容代码隔离，个别安卓也会成功进入这个判断，因此加上-webkit-overflow-scrolling: touch的判断可以有效规避安卓机。

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) {.fullscreen {/* 适配齐刘海 */padding-top: 20px;padding-top: constant(safe-area-inset-top);padding-top: env(safe-area-inset-top);/* 适配底部小黑条 */padding-bottom: 0;padding-bottom: costant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
}

非齐刘海的ios手机适配：

@supports (-webkit-overflow-scrolling: touch) {/* 适配ios 非齐刘海机型 */
}

二、机型区分适配

/* iphone x / xs / 11 pro*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {...
}
/* 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) {...
}

缺点：工作量有点大，且每年9月份发布会后要及时更新新版本适配代码。

三、jsBridge方案

Android机器厂商百花齐放，各厂商的机型也是眼花缭乱。该方案同时适合Android和IOS

客户端获取状态栏高度后，H5通过JSBridge交互拿到状态栏高度，设置页面样式避开齐刘海区域。
混合开发，顶部导航采用app端的。

h5 iOS 刘海屏适配相关推荐

H5：IOS刘海屏适配
场景 app部分页面使用H5混合开发,框架使用的是Vue.页面基本在Android上展示正常,在ios(iPhone 7.iPhone X.iPhone 11)上会出现两个问题: (1) 顶部标题栏即 ...
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 ...

h5 iOS 刘海屏适配

适配方案：

h5 iOS 刘海屏适配相关推荐

最新文章

热门文章