xiexie

现在iPhone X的形状不规则，其状态栏的高不再是20px，而且在摄像头和扬声器的设置下，你的标题栏内容将会完全无法访问到。需要注意的是，这也适用于固定在屏幕底部的页脚，它将被麦克风阻塞。

幸运的是，苹果添加了一种方法，将安全区域布局指南暴露给CSS。他们添加类似一个CSS的变量概念，叫作CSS constants。可以考虑这样的CSS变量，这些变量是由系统设计的，不能被覆盖。它们可以通过CSS的constant()函数来完成。

constant()函数具有四个布局的值：

• constant(safe-area-inset-top)：在Viewport顶部的安全区域内设置量（CSS像素）
• constant(safe-area-inset-bottom)：在Viewport底部的安全区域内设置量（CSS像素）
• constant(safe-area-inset-left)：在Viewport左边的安全区域内设置量（CSS像素）
• constant(safe-area-inset-right)：在Viewport右边的安全区域内设置量（CSS像素）

在实际使用中，可以把这些值添加到margin或padding中，可以添加四个项，也可以只添加你所需要的。比如顶部或左侧。

在上面的示例的网站上添加了以下的值：

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

这完全解决了在菜单和社交媒体图标上的问题。

来看一个示例

假设你有一个固定位置的标题栏，你的iOS10的CSS可能是这样写的：

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;

    padding-top: 20px; /* Status bar height */
}

为了自动调整iPhone X和其他iOS11设备，你可以在meta标签的viewport中添加viewport-fit="cover"：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 

然后通过CSS的constant()修改padding-top的值：

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;

    /* Status bar height on iOS 10 */
    padding-top: 20px; 

    /* Status bar height on iOS 11+ */
    padding-top: constant(safe-area-inset-top);
}

对于不知道如何解决constant()语法的旧设备来说，你可以做一个降级的处理。你可以使用CSS的calc()函数。也可以借用@supports来使用。

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;

    /* Status bar height on iOS 10 */
    padding-top: 20px;   
}

@supports (constant(safe-area-inset-top)) {
    header {
        /* Status bar height on iOS 11+ */
        padding-top: constant(safe-area-inset-top);
    }
}