# 適配iPhoneX `iPhoneX`的出現將手機的顏值帶上了一個新的高度，它取消了物理按鍵，改成了底部的小黑條，但是這樣的改動給開發者適配移動端又增加了難度。 <br> <br> # 安全區域 在`iPhoneX`發布后，許多廠商相繼推出了具有邊緣屏幕的手機。  <br> 這些手機和普通手機在外觀上無外乎做了三個改動：圓角（`corners`）、劉海（`sensor housing`）和小黑條（`Home Indicator`）。為了適配這些手機，安全區域這個概念變誕生了：安全區域就是一個不受上面三個效果的可視窗口范圍。 <br> 為了保證頁面的顯示效果，我們必須把頁面限制在安全范圍內，但是不影響整體效果。 <br> <br> # viewport-fit `viewport-fit`是專門為了適配`iPhoneX`而誕生的一個屬性，它用于限制網頁如何在安全區域內進行展示。 <br>  <br> * `contain`: 可視窗口完全包含網頁內容 * `cover`：網頁內容完全覆蓋可視窗口 <br> 默認情況下或者設置為`auto`和`contain`效果相同。 <br> <br> # env、constant  <br> 我們需要將頂部和底部合理的擺放在安全區域內，`iOS11`新增了兩個`CSS`函數`env、constant`，用于設定安全區域與邊界的距離。 <br> 函數內部可以是四個常量： * `safe-area-inset-left`：安全區域距離左邊邊界距離 * `safe-area-inset-right`：安全區域距離右邊邊界距離 * `safe-area-inset-top`：安全區域距離頂部邊界距離 * `safe-area-inset-bottom`：安全區域距離底部邊界距離 <br> 注意：我們必須指定`viweport-fit`后才能使用這兩個函數： ~~~ <meta name="viewport" content="viewport-fit=cover"> ~~~ <br> `constant`在`iOS < 11.2`的版本中生效，`env`在`iOS >= 11.2`的版本中生效，這意味著我們往往要同時設置他們，將頁面限制在安全區域內： ~~~ body { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } ~~~ <br> 當使用底部固定導航欄時，我們要為他們設置`padding`值： ~~~ { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } ~~~ <br> <br> # 參考資料 [關于移動端適配，你必須要知道的](https://juejin.im/post/5cddf289f265da038f77696c)