前端文档

# IOS 刘海屏 H5 CSS 适配

# viewport-fit

iOS11 新增特性，苹果公司为了适配 iPhoneX 等刘海屏， 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：

  • auto 默认
  • contain 可视窗口完全包含网页内容，左图
  • cover 网页内容完全覆盖可视窗口，即页面完全充满屏幕
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui, viewport-fit=cover"
/>

# constant 函数

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设获取安全区域与边界的距离，有四个预定义的变量（单位是 px）：

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

适配的核心是：通过 constant() 可以获取到非安全边距，再结合 padding 或 margin 来控制页面元素避开非安全区域。

Webkit 在 iOS11 中新增 CSS Functions: env( )替代 constant( )，文档中推荐使用 env( )，而 constant( ) 从 Safari Techology Preview 41 和 iOS11.2 Beta 开始会被弃用。在不支持 env( )的浏览器中，会自动忽略这一样式规则，不影响网页正常的渲染。为了达到最大兼容目的，我们可以 constant( ) 和 env( ) 同时使用。

# @supports

使用@supports 查询机型是否支持 constant() / env()实现兼容代码隔离

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) {
  body {
    // 适配齐刘海
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    // 适配底部黑条
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

← Fiddler使用 →