iphonex適配

第一步：設置網頁在可視窗口的佈局方式
ios11新增 viweport-fit 屬性，使得頁面內容徹底覆蓋整個窗口：

<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 這個變量，由於它對應的就是小黑條的高度（橫豎屏時值不同）。

body {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

第三步：fixed 元素的適配
● 類型一：fixed 徹底吸底元素（bottom = 0）

{
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

● 類型二：fixed 非徹底吸底元素（bottom ≠ 0），好比 「返回頂部」、「側邊廣告」 等

{
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

第四步：若是咱們只但願 iPhoneX 才須要新增適配樣式，咱們能夠配合 @supports 來隔離兼容樣式

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    div {
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
    }
}