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

补充：
@media：可用于基于一个或多个媒体查询的结果来应用样式表的一部分，使用它可以指定一个媒体查询和一个css块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该css块才能用于该文档

这个方案的缺点是，工作量比较大。而且每当发布新款产品的时候还要重复修改，不推荐使用

参考：https://www.ldsun.com/h5-fullscreen-webview-adaptation-notch-screen/