因為 iPhone X 的劉海設計，Web 在 iPhone X 橫屏時，可能會有些問題：
默認情況，iPhone X 會將頁面填充到安全區(qū)域(safe area)，就像上面的圖一樣，一般情況下是沒有問題的；
但如果是全屏 Web App 就會有問題了，比如背景色和頁面的契合程度之類的；
有的 iOS app 內(nèi)置 WKwebview 可能會為了避免一些bug，而采用統(tǒng)一的行為，就是禁用 iOS 11 自己的內(nèi)容區(qū)域判斷，從而讓 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. 設置頁面邊距為安全區(qū)域邊距
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默認的安全區(qū)域的，你可以設置任何值，不過建議要不小于默認的安全區(qū)域值。
當前版本，橫屏時，各屬性的值：
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)。
對于web前端學習有不懂的，或者不知道學習路線，不知道學習方法，不知道該如何扎實能找到工作的朋友，可以來我們頭條前端群：592569448，我整理了非常專業(yè)的JavaScript、jQuery、bootstrap、angularJS、react、nodejs等企業(yè)級框架項目實戰(zhàn)，還有PDF文檔資料都上傳到網(wǎng)盤了。
