iphonex適配

FrancisSoung 發(fā)布于2019-08-26 11:46 / 3077人閱讀

摘要：第三步元素的適配類型一完全吸底元素類型二非完全吸底元素，比如返回頂部側(cè)邊廣告等第四步如果我們只希望才需要新增適配樣式，我們可以配合來隔離兼容樣式

第一步：設(shè)置網(wǎng)頁在可視窗口的布局方式
ios11新增 viweport-fit 屬性，使得頁面內(nèi)容完全覆蓋整個窗口：

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

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

這里我們只需要關(guān)注 safe-area-inset-bottom 這個變量，因為它對應(yīng)的就是小黑條的高度（橫豎屏?xí)r值不一樣）。

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），比如 “返回頂部”、“側(cè)邊廣告” 等

{
    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);
    }
}