IphoneX 的缺口（小刘海）及其css样式解决方案

发表于 | 更新于: | 分类于 |
字数统计: 481 | 阅读时长 ≈ 2

IphoneX 的缺口（小刘海）及其css样式解决方案

苹果公司的 IphoneX 拥有了全面屏，只保留了‘小刘海’给摄像头和一些传感设备。结果就是让屏幕设计陷入尴尬的境地，就像限制网页有一个“安全区域”和白色边缘条。虽然没有太多的黑魔法去消除它，但给 body 设置一个 background-color 属性也可以做到。或者扩展网页以覆盖整个屏幕（该死的缺口），可以给 viewport 的 meta 标签添加 viewport-fit=cover。

https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_1000,f_auto,q_auto/v1505590717/iphonex-safari_njxeiw.png

然后，由你自己决定如何处理安全区域的重叠。这里有一些新的 css 可以帮助适配它。Stephen Radford documents

为了适配缺口，可以引入 ios 11 版本包含的一些常量，这些常量需要使用了 viewport-fit=cover 才会生效。

  • safe-area-inset-top
  • safe-area-inset-right
  • safe-area-inset-left
  • safe-area-inset-bottom

这些常量可以被用在 margin, padding, 或者绝对定位的 top, left 等属性上。

padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);

还有另外一个尴尬的局面关于缺口，安全区域和 fixed 定位。Darryl Pogue reports:

ios 11与早期的版本不太一样，它现在遵守安全区域这一规则。这意味着，如果你有一个 header bar， 并且设置 position: fixed;top: 0;，它初始化时会渲染在顶部的 20px 下面：对齐顶部状态栏的底部。当你向下浏览网页，它会隐藏状态栏。如果向上滚动，状态栏又来跑出来（留下尴尬的20px间隙）。

幸运的是这也很容易解决。只需要添加 viewport-fit=cover 到 meta viewport 标签上。

如果覆盖了全屏幕，那可能需要耍点小聪明去避免挡住内容。

0%