iphoneX底部黑條問題解決，使用css @supports

第一步：設置網頁在可視窗口的布局方式

新增 viweport-fit 屬性，使得頁面內容完全覆蓋整個窗口：

1	<meta name="viewport" content="width=device-width, viewport-fit=cover">

第二步：頁面主體內容限定在安全區域內
env() 和 constant()ios11新增特性

● safe-area-inset-left：安全區域距離左邊邊界距離
● safe-area-inset-right：安全區域距離右邊邊界距離
● safe-area-inset-top：安全區域距離頂部邊界距離
● safe-area-inset-bottom：安全區域距離底部邊界距離

這里我們只需要關注 safe-area-inset-bottom 這個變量，因為它對應的就是小黑條的高度（橫豎屏時值不一樣）。

@supports 按照瀏覽器是否支持一個或多個特定的 CSS 特性應用一組樣式聲明;

如果我們只希望 iPhoneX 才需要新增適配樣式，我們可以配合 @supports 來隔離兼容樣式

@supports (bottom: env(safe-area-inset-bottom)) {    // @supports 判斷瀏覽器是否支持 bottom: env(safe-area-inset-bottom） 支持的話執行下面的樣式 safe-area-inset-bottom: iphone安全區域距離底部邊界距離
  body::after{  //例：如果同意上面條件的話就是iPhoneX，就把body下面插入一個after高度正好在，小黑條下面
　　content:'',
　　display:block,
　　height:constant(safe-area-inset-buttom),  //高度等於小黑條的高度
   background-color:white,
 }
}

 

感謝您的閱讀，本文由 凹凸實驗室 版權所有。如若轉載，請注明出處：凹凸實驗室（https://aotu.io/notes/2017/11/27/iphonex/）