假设你有一个固定位置的标题栏，你的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); } }
原文: http://www.w3cplus.com/css/the-notch-and-css.html ? w3cplus.com
原文：http://www.cnblogs.com/NB-JDzhou/p/7655639.html