用CSS裡的 viewport-fit 標籤應對iPhone X 的劉海
阿新 • • 發佈：2018-12-06
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);`