H5在全屏webview中双端适配刘海屏

本文主要是介绍H5在全屏webview中双端适配刘海屏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

ios适配

在这里插入图片描述

补充：

上面的px单位和我们在web中的px单位虽然一样，但是web所需的px实际为iOS中的pt值，px转pt需要根据设备的ppi(Pixels Per Inch:像素密度进行转换)：
px:pixel像素，是屏幕上的显示的基本地，并不是长度单位，这个点可大可小，点小的话就很清晰，我们称之为“分辨率高”，反之就是"分辨率低"，所以像素是一个相对单位。
pt:point准确的说死一个专用印刷单位“镑”，大小为1/72英寸，是一个长度单位，也是绝对长度。

通过上面表可以看到ios中的px转pt根据设备的ppi大概是3:1/2:1/1:1转换
转换完可以看到：

4.7寸：6、6s、7、8，状态栏的高度为20pt，导航栏的高度为44pt
5.5寸：6p、7p、8p，状态栏的高度为18pt，导航栏的高度为44pt
刘海屏X,XR,XS,XSmax,11，状态栏的高度为44pt，导航栏的高度为44pt

iOS适配方案

Apple官方适配方案

在iphonex之后苹果引入了“safe area(安全区)”,安全区指屏幕内不受圆角，齐刘海，底部小条等元素影响的可视窗口。
在这里插入图片描述

从ios11开始，为了适配刘海屏，Apple对html的viewport mate标签做了扩展

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

viewport-file=cover可设置为auto，contain，cover三种状态
auto：
contain：
cover：页面完全充满屏幕

iOS11同时新增了一个特性，constant(safe-area-inset-x)，这是Webkit的一个css函数，用于获取安全区域与边界的距离，有四个预定义的变量（单位px）

safe-area-inset-left：安全区域距离左边界距离，横屏时适配
safe-area-inset-right：暗转区域距离右边界距离，横屏时适配
safe-area-inset-top：安全区域距离顶部边界距离，竖屏下刘海屏为44px,iphone6系列20px，竖屏刘海适配关键。
safe-area-inset-bottom：安全区域距离底部边界距离，竖屏下为34px，竖屏小黑条适配关键。

最终实现方案：

首先通过设置让页面充满全屏。
通过webkit内置的css函数。获取安全区域与各边之间的间距，然后通过padding/margin/绝对定位等方式，让页面展示在安全区域内

补充：

webkit在iOS11中新增csss Function：env()替代constant()，文档推荐使用env(),而constant()从safari Techology Preview41和iOS11.2Bate开始会被弃用
在不支持env()的浏览器中，会自动忽略这一样式规则，不影响网页正常的渲染，我们可以两种都使用。

适配代码：

@supports((height:constant(safe-area-inset-top)) or (height:env(safe-area-inset-top))) and (-webkit-overflow-scrolling:touch){.fullscreen{/* 适配齐刘海 */padding-top: 20;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);}
}

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

补充：
@supports：您可以制定依赖于浏览器中的一个或多个特定的css功能的支持声明，这被称为特性查询，该规则可以放在代码的顶层，也可以嵌套在任何其他条件规则中。
通俗点说：如果当前容器浏览器支持这些css属性，那么下面的css语句就生效，如果不支持，那就不生效

机型区分适配

/* 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) {...
}