CSS适配刘海屏和小黑条

时间 2019-11-08

标签 css 适配刘海栏目 CSS 繁體版

原文原文链接

概述

以 iPhoneX 为例，顶部有刘海，下面有小黑条，四个角还有圆角，若是不作好适配，颇有可能致使页面遮挡、操做冲突等问题，因此咱们须要将页面内容控制在安全区域，便可视窗口区域。css

IOS如何适配？

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

<meta name="viewport" content="width=device-width, viewport-fit=cover" />
复制代码

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

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。bash

安卓如何适配？

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

.page.android {
  padding-top: 28px;
}
复制代码