CSS适配刘海屏和小黑条

概述

以 iPhoneX 为例，顶部有刘海，下面有小黑条，四个角还有圆角，如果不做好适配，很有可能导致页面遮挡、操作冲突等问题，所以我们需要将页面内容控制在安全区域，即可视窗口区域。

IOS如何适配？

第一步，设置网页在可视窗口的布局方式。

<meta name="viewport" content="width=device-width, viewport-fit=cover" />

这是 IOS11.2 新增的特性，苹果为了适配 iPhoneX 对现有 viewport meta 标签的一个拓展，viewport-fit 可设置三个值，具体可见 The viewport-fit descriptor ：

• contain：可视窗口完全包含网页内容
• cover：网页内容完全覆盖可视窗口
• auto：默认值，跟contain表现一致

第二步，页面主体内容限制在安全区域内

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .page {
    /* ios < 11.2 */
    padding-left: constant(safe-area-inset-left);
    padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    /* ios >= 11.2 */
    padding-left: env(safe-area-inset-left);
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@supports 用于检测是否支持 safe-area-inset。

安卓如何适配？

目前安卓并没有很好的适配方案，如果涉及到沉浸式体验，建议让客户端进行刘海适配，客户端可以获取到刘海的高度。如果客户端不支持，则可设置为 28px，此高度可适配大多数安卓刘海屏。

.page.android {
  padding-top: 28px;
}