web app 一分鐘適配 iPhone X

舞動乾坤發表於2017-10-27
WebAPPiPhone

明天就要開搶 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)。


相關文章