這兩天去面試，被考察如何適配劉海屏、異性屏，回來總結了一套方案，以供大家參考。
為了演示方便，以下均已 iPhone X 橫屏作為例子。
安全區
其實瀏覽器已經默認使用了一種方案，在大多數情況下都能處理好異形屏問題，它的實現是基於安全區（safe area）的概念。
瀏覽器在默認情況下，會給頁面邊緣留空，以適應劉海屏的情況。
上圖中的橙色區域，就是瀏覽器留空的邊界，而中間部分就是安全區。頁面的元素佈局、定位等，都是在安全區中進行。
安全區外的邊界大小無法通過 css 控制，但可以通過設置 html 或 body 的 background-color 來控制它的顏色（默認白色）。
可以發現，由於安全區的存在，內容並不能佔滿整個屏幕。
這時候需要引入一個 meta 屬性值 viewport-fit=cover
內容填充整個屏幕
通過設置視口（viewport）的 meta 屬性，可以實現安全區填充滿整個屏幕。
此時，雖然頁面填充滿整個屏幕，但是部分內容會被劉海遮擋。
所以，需要手工地調整內容區的邊距。
在 React、Vue、Angular 這種單頁應用中，都存在根元素 ，我們可以通過給根元素設置固定的 padding 以規避遮擋。
但是固定的 padding 不能應用於所有的異性屏，畢竟劉海尺寸不一。辦法是通過結合上面提到的安全區 ——
注意觀察上述代碼，引入了 4 組變量，它們是預定義的環境變量，用於獲取安全區模式下的邊界。如 env(safe-area-inset-left)，用於獲取在安全區模式中的左邊界。
不過，這些變量可能存在兼容問題。通過前置 padding: 20px，使得在不兼容時應用固定的 padding，而兼容時候則覆蓋這個固定值。
在設置後，我們實現瞭如下效果。
而 header 和 footer 由於被設置為 position: fixed，寬度基於視口，所以還存在被遮擋問題。同樣，應用預定義的環境變量後可以解決這個問題。
結語
以上通過設置 HTML 的 meta 屬性和 CSS 的預定義環境變量，精細化地控制頁面邊距，實現適配劉海屏的效果。
你的點贊和轉發，是我創作的動力，希望能多多支持。
