因?yàn)?iPhone X 的劉海設(shè)計(jì)，Web 在 iPhone X 橫屏?xí)r汛闸，可能會(huì)有些問(wèn)題：
默認(rèn)情況蝙茶，iPhone X 會(huì)將頁(yè)面填充到安全區(qū)域(safe area)，就像上面的圖一樣诸老，一般情況下是沒(méi)有問(wèn)題的尸闸；
但如果是全屏 Web App 就會(huì)有問(wèn)題了，比如背景色和頁(yè)面的契合程度之類(lèi)的；
有的 iOS app 內(nèi)置 WKwebview 可能會(huì)為了避免一些bug吮廉，而采用統(tǒng)一的行為苞尝，就是禁用 iOS 11 自己的內(nèi)容區(qū)域判斷，從而讓 H5 默認(rèn)全屏宦芦，如下圖：
解決方案
1. 默認(rèn)全屏
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
在 viewport 的 meta 屬性中宙址，添加 viewport-fit=cover 即可。
viewport-fit 默認(rèn)值為 auto/contain调卑，全屏值為cover抡砂，是不是感覺(jué)很熟悉？嗯恬涧，和 background-size 以及 object-fit 一樣的注益。
2. 設(shè)置頁(yè)面邊距為安全區(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 新增加的特性溯捆，專(zhuān)門(mén)用于應(yīng)對(duì)劉海的丑搔。。提揍。
當(dāng)然啤月，這里的padding只是用于匹配iPhone X默認(rèn)的安全區(qū)域的，你可以設(shè)置任何值劳跃，不過(guò)建議要不小于默認(rèn)的安全區(qū)域值谎仲。
當(dāng)前版本，橫屏?xí)r刨仑，各屬性的值：
safe-area-inset-top = 0 safe-area-inset-right = 44px? safe-area-inset-bottom = 21px? safe-area-inset-left = 44px
豎屏?xí)r各值都是 0郑诺，但豎屏?xí)r需要特別留意 status-bar(44px) 和 home-indicator(34px)。
對(duì)于web前端學(xué)習(xí)有不懂的杉武，或者不知道學(xué)習(xí)路線间景，不知道學(xué)習(xí)方法，不知道該如何扎實(shí)能找到工作的朋友艺智，可以來(lái)我們頭條前端群：592569448，我整理了非常專(zhuān)業(yè)的JavaScript圾亏、jQuery十拣、bootstrap、angularJS志鹃、react夭问、nodejs等企業(yè)級(jí)框架項(xiàng)目實(shí)戰(zhàn)，還有PDF文檔資料都上傳到網(wǎng)盤(pán)了曹铃。
