ios兼容 iphoneX ios10 ios11
假设你有一个固定位置的标题栏,你的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