HTML5 移动端页面适配 iOS 系统刘海屏

1. Apple官方适配方案

在 iphone X 之后引入了一个新概念：“safe area（安全区域）”，安全区域指屏幕内不受圆角、齐刘海、底部小黑条等元素影响的可视窗口。如下图：
在这里插入图片描述从 iOS11 开始，为了适配刘海屏，Apple 公司对 HTML 的 viewport meta 标签做了扩展

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

viewport-fit 属性

值	含义
contain	可视窗口完全显示网页内容 (左图)
cover	网页内容完全覆盖可视窗口 (右图)
auto	默认值，跟 contain 表现一致

在这里插入图片描述

适配方法：

首先通过设置 < 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( ) 同时使用。
env()函数 MDN文档说明

body{
    
    
  padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
  padding-top: env(safe-area-inset-top); /* iOS 11.2 */   
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);
}

使用 @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 非齐刘海机型 */
}

补充：通过 JavaScript 获取刘海屏安全区域高度

在 JavaScript 中读取env函数值，需要使用 CSS自定义属性。
传送门：CSS中自定义属性（变量）详解

首先设置：

:root {
    
    
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

通过以下方法，读取到 CSS 自定义变量

getComputedStyle(document.documentElement).getPropertyValue("--sat")

2. 机型区分适配

/* 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月份发布会后要及时更新新版本适配代码。

3. jsBridge方案

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

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