web app 一分鐘適配 iPhone X

明天就要開搶 iPhone X 了，然而面對 iPhone X 這個奇葩的屏幕，你準備好了嗎？

由於 iPhone X 的劉海設計，Web 在 iPhone X

橫屏

時，可能會有些問題：

1. 默認狀況，iPhone X 會將頁面填充到安全區域(safe area)，就像上面的圖同樣，通常狀況下是沒有問題的；
2. 但若是是全屏 Web App 就會有問題了，好比背景色和頁面的契合程度之類的；
3. 有的 iOS app 內置 WKwebview 可能會爲了不一些bug，而採用統一的行爲，就是禁用 iOS 11 本身的內容區域判斷，從而讓 H5 默認全屏，以下圖：

解決方案

1. 默認全屏

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">  
複製代碼

在 viewport 的 meta 屬性中，添加 viewport-fit=cover 便可。

viewport-fit 默認值爲 auto/contain，全屏值爲cover，是否是感受很熟悉？嗯，和 background-size 以及 object-fit 同樣的。

2. 設置頁面邊距爲安全區域邊距

body{  
    padding: 
        constant(safe-area-inset-top) 
        constant(safe-area-inset-right) 
        constant(safe-area-inset-bottom) 
        constant(safe-area-inset-left);  
}
複製代碼

嗯，constant() 以及 safe-area-inset-top safe-area-inset-right safe-area-inset-bottom safe-area-inset-left 是 iOS 11 webview 新增長的特性，專門用於應對劉海的。。。

固然，這裏的padding只是用於匹配iPhone X默認的安全區域的，你能夠設置任何值，不過建議要不小於默認的安全區域值。

當前版本，橫屏時，各屬性的值：

safe-area-inset-top = 0  
safe-area-inset-right = 44px  
safe-area-inset-bottom = 21px  
safe-area-inset-left = 44px  
複製代碼

豎屏時各值都是 0，但豎屏時須要特別留意 status-bar(44px) 和 home-indicator(34px)。