安全區域？
安全區域指的是一個可視窗口范圍，處於安全區域的內容不受圓角（corners）、齊劉海（sensor housing）、小黑條（Home Indicator）影響，如下圖藍色區域：
也就是說，我們要做好適配，必須保證頁面可視、可操作區域是在安全區域內。
更詳細說明，參考文檔：Human Interface Guidelines - iPhoneX
viewport-fit
iOS11 新增特性，蘋果公司為了適配 iPhoneX 對現有 viewport meta 標簽的一個擴展，用於設置網頁在可視窗口的布局方式，可設置三個值：
- contain: 可視窗口完全包含網頁內容（左圖）
- cover：網頁內容完全覆蓋可視窗口（右圖）
- auto：默認值，跟 contain 表現一致
注意：網頁默認不添加擴展的表現是 viewport-fit=contain，需要適配 iPhoneX 必須設置 viewport-fit=cover，這是適配的關鍵步驟。
更詳細說明，參考文檔：viewport-fit-descriptor
env() 和 constant()
iOS11 新增特性，Webkit 的一個 CSS 函數，用於設定安全區域與邊界的距離，有四個預定義的變量：
- safe-area-inset-left：安全區域距離左邊邊界距離
- safe-area-inset-right：安全區域距離右邊邊界距離
- safe-area-inset-top：安全區域距離頂部邊界距離
- safe-area-inset-bottom：安全區域距離底部邊界距離
這里我們只需要關注 safe-area-inset-bottom 這個變量，因為它對應的就是小黑條的高度（橫豎屏時值不一樣）。
注意：當 viewport-fit=contain 時 env() 是不起作用的，必須要配合 viewport-fit=cover 使用。對於不支持env() 的瀏覽器，瀏覽器將會忽略它。
需要做向后兼容，像這樣：
padding-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
注意：env() 跟 constant() 需要同時存在，而且順序不能換。
更詳細說明，參考文檔：Designing Websites for iPhone X
如何適配
了解了以上所說的幾個知識點，接下來我們適配的思路就很清晰了。
第一步：設置網頁在可視窗口的布局方式
新增 viweport-fit 屬性，使得頁面內容完全覆蓋整個窗口：
<meta name="viewport" content="width=device-width, viewport-fit=cover">
前面也有提到過，只有設置了 viewport-fit=cover，才能使用 env()。
第二步：頁面主體內容限定在安全區域內
這一步根據實際頁面場景選擇，如果不設置這個值，可能存在小黑條遮擋頁面最底部內容的情況。
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
第三步：fixed 元素的適配
類型一：fixed 完全吸底元素（bottom = 0），比如下圖這兩種情況：
可以通過加內邊距 padding 擴展高度：
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
或者通過計算函數 calc 覆蓋原來高度：
{
height: calc(60px(假設值) + constant(safe-area-inset-bottom));
height: calc(60px(假設值) + env(safe-area-inset-bottom));
}
注意，這個方案需要吸底條必須是有背景色的，因為擴展的部分背景是跟隨外容器的，否則出現鏤空情況。
else
類型一
還有一種方案就是，可以通過新增一個新的元素（空的顏色塊，主要用於小黑條高度的占位），然后吸底元素可以不改變高度只需要調整位置，像這樣：
{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
空的顏色塊：
{
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
background-color: #fff;
}
類型二
fixed 非完全吸底元素（bottom ≠ 0），比如 “返回頂部”、“側邊廣告” 等
像這種只是位置需要對應向上調整，可以僅通過外邊距 margin 來處理：
{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
或者，你也可以通過計算函數 calc 覆蓋原來 bottom 值：
{
bottom: calc(50px(假設值) + constant(safe-area-inset-bottom));
bottom: calc(50px(假設值) + env(safe-area-inset-bottom));
}
@supports 隔離兼容樣式
寫到這里，我們常見的兩種類型的 fixed 元素適配方案已經了解了吧。如果我們只希望 iPhoneX 才需要新增適配樣式，我們可以配合 @supports 來隔離兼容樣式，當然這個處理對頁面展示實際不會有任何影響：
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
div {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
}