Iphone X HTML 齊劉海 過招篇

最近在做兼容的時候發現一個問題，在設置了全屏width:100%;height:100%的情況下。IphoneX底部會有一個空白區域，這個是IphoneX底部是預留操作區。需要手動拖動才能把白色區域給覆蓋。

那麼如何一開始全屏呢？消除白色區域呢？

Iphone官網已經給予解決方案。在viewport加入 viewport-fit=cover 屬性。就可以解決了

<meta name="viewport" content="width_=device-width, initial-scale=1.0, viewport-fit=cover">

viewport-fit的作用，它有三個可能的值：

• contain：視口應該完全包含網頁內容。這意味著位置固定元素將被包含在iOS 11的安全區域內。
• cover：網頁內容應該完全覆蓋屏幕。這意味著位置固定元素將固定到屏幕，即使這意味著它們將被遮擋。這恢復了我們在iOS 10上的行為。
• auto：默認值，在這種情況下，它的行為與contain。

因此，要將屏幕覆蓋全部屏幕，您需要添加viewport-fit=cover到標記。

相關文章：

Dont worry - here are fixes devs need for iOS 11 Webview Viewport