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( ) 同时使用。
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自定义属性。
首先设置：
: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端的。
