假设你有一个固定位置的标题栏，你的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"：

 

然后通过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);    }}

 

原文:  ©