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

Posted 2022-06-14 明天也要努力

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端的。