为 iPhone X 设计网站

我们已经介绍过 “刘海” 以及从 HTML 和 CSS 角度处理它的选项。 现在，我们从官方那里获得了更多细节。

安全区域内边距不是边距的替代品。

… 我们希望指定我们的填充应为默认填充或安全区域内边距，以较大者为准。 这可以通过 全新的 CSS 函数 min() 和 max() 来实现，这些函数将在未来的 Safari Technology Preview 版本中提供。

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, constant(safe-area-inset-left));
        padding-right: max(12px, constant(safe-area-inset-right));
    }
}

务必使用 @supports 进行功能检测以检查 min 和 max，因为它们并非在所有地方都受支持，并且由于 CSS 对无效变量的处理方式，不要在 @supports 查询中指定变量。

Jeremey Keith 的犀利见解尤其精彩，例如

您可以添加一堆 Apple 随意搞出来的专有 CSS。

或者，您可以确保在 body 元素上设置背景颜色。

我推荐后者。

以及

这篇文章可以用一个词概括：不要。

更具体地说，不要为任何特定设备设计网站。

尽管如果这推动了 min() 和 max() 作为通用函数的支持，那也挺酷的。

直接链接 →