ios相容 iphoneX ios10 ios11

標籤：number   www.   meta   ade   const   header   自動   ini   固定   

假設你有一個固定位置的標題列，你的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

ios相容 iphoneX ios10 ios11