以下是處理前后效果圖：
適配之前需要了解的幾個新知識
安全區域
安全區域指的是一個可視窗口范圍，處于安全區域的內容不受圓角(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
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 時 constant 函數是不起作用的，必須要配合 viewport-fit=cover 使用。對于不支持 constant 的瀏覽器，瀏覽器將會忽略它。
官方文檔中提到 env 函數即將要替換 constant 函數，筆者測試過暫時還不可用。
更詳細說明，參考文檔：?Designing Websites for iPhone X
如何適配
了解了以上所說的幾個知識點，接下來我們適配的思路就很清晰了。
第一步：設置網頁在可視窗口的布局方式
新增 viweport-fit 屬性，使得頁面內容完全覆蓋整個窗口：
前面也有提到過，只有設置了 viewport-fit=cover，才能使用 constant 函數。
第二步：頁面主體內容限定在安全區域內
這一步根據實際頁面場景選擇，如果不設置這個值，可能存在小黑條遮擋頁面最底部內容的情況。
第三步：fixed 元素的適配
類型一：fixed 完全吸底元素(bottom = 0)，比如下圖這兩種情況：
可以通過加內邊距 padding 擴展高度：
{??
padding-bottom:?constant(safe-area-inset-bottom);??
}?
或者通過計算函數 calc 覆蓋原來高度：
{?
??height:?calc(60px(假設值)?+?constant(safe-area-inset-bottom));?
}?
注意，這個方案需要吸底條必須是有背景色的，因為擴展的部分背景是跟隨外容器的，否則出現鏤空情況。
還有一種方案就是，可以通過新增一個新的元素(空的顏色塊，主要用于小黑條高度的占位)，然后吸底元素可以不改變高度只需要調整位置，像這樣：
{?
??margin-bottom:?constant(safe-area-inset-bottom);?
}?
空的顏色塊：
{?
??position:?fixed;?
??bottom:?0;?
??width:?100%;?
??height:?constant(safe-area-inset-bottom);?
??background-color:?#fff;?
}?
類型二：fixed 非完全吸底元素(bottom ≠ 0)，比如 “返回頂部”、“側邊廣告” 等
像這種只是位置需要對應向上調整，可以僅通過外邊距 margin 來處理：
{?
??margin-bottom:?constant(safe-area-inset-bottom);?
}?
或者，你也可以通過計算函數 calc 覆蓋原來 bottom 值：
{?
??bottom:?calc(50px(假設值)?+?constant(safe-area-inset-bottom));?
}?
別忘了使用 @supports
寫到這里，我們常見的兩種類型的 fixed 元素適配方案已經了解了吧，但別忘了，一般我們只希望 iPhoneX 才需要新增適配樣式，我們可以配合 @supports 這樣編寫樣式：
@supports?(bottom:?constant(safe-area-inset-bottom))?{?
??div?{?
????margin-bottom:?constant(safe-area-inset-bottom);?
??}?
}?
