假设你有一个固定位置的标题栏，你的iOS10的CSS可能是这样写的：
header {
position: fixed;
top:;
left:;
right:;
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:;
left:;
right:;
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:;
left:;
right:;
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);
}
}
原文: http://www.w3cplus.com/css/the-notch-and-css.html © w3cplus.com