用CSS里的 viewport-fit 標簽應對iPhone X 的劉海

iPhone X 配備一個覆蓋整個手機的全面屏，頂部的“劉海”為相機和其他組件留出了空間。然而結果就是會出現一些尷尬的情景：網站被限制在一個“安全區域”，在兩側邊緣會出現白條兒。移除這個白條兒也不難，給 body 設置一個  background-color 就可以搞定。或者，可以添加 viewport-fit=cover meta 標簽，將整個網站擴展到整個屏幕。

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

然后就由你來決定被安全區域制約的重疊區了。有一些新的 CSS 可以助你一臂之力。Stephen Radford 文檔：

為了處理這些需求，iOS 11 的 Safari 引入了一些 constant 來處理 viewport-fit=cover 屬性。

• safe-area-inset-top

• safe-area-inset-right

• safe-area-inset-left

• safe-area-inset-bottom

這些值可以應用到 margin、padding 上，也可以應用到絕對定位的 top 或 left 上。

在網頁的 container 上添加如下代碼：

`padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);`