iphoneX手機取消了實體Home鍵，取而代之的是主界面底部不顯眼的橫條“Home Indicator”。當網頁底部fixed 元素時候，一部分元素可能就被這個橫條遮擋住，怎麼適配解決呢？
第一步：
<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>
第二步：
頁面主體內容限定在安全區域內,如果不設置這個值，可能存在小黑條遮擋頁面最底部內容的情況
body { padding-bottom: env(safe-area-inset-bottom); }
第三步：
fixed 元素的適配
第一種：padding-bottom: env(safe-area-inset-bottom);
注意元素是否設置box-sizing:border-box;否則不起作用，道理就不說了。
第二種：height: calc(60px(假設值) + env(safe-area-inset-bottom));
第三種：margin-bottom: env(safe-area-inset-bottom);
這三種方式都可解決，視情況而定選擇合適的，也可以靈活爲fixed 元素的子元素添加這些屬性
使用 @supports
一般只希望 iPhoneX 才需要新增適配樣式,可以配合 @supports 編寫樣式：
@supports (bottom: env(safe-area-inset-bottom)) {
div {
margin-bottom: env(safe-area-inset-bottom);
}
}
下面是一些拓展知識點：
1.iphoneX業界劉海屏幕第一款機型，導致全屏不能正常的全屏顯示了,所以需要對iphonx 適配
<meta name="viewport" content="viewport-fit=contain">
<meta name="viewport" content="viewport-fit=cover">
<meta name="viewport" content="viewport-fit=auto">
viewport-fit：
contain: 可視化窗口完全包含網頁內容
cover: 網頁內容完全覆蓋
auto: 默認值和 contain 一樣
2.ios11 增加新特性，webkit 的 css 函數
四個預定義變量爲設定安全區域和邊界的距離，如下:
safe-area-inset-left：安全區域距離左邊邊界距離
safe-area-inset-right：安全區域距離右邊邊界距離
safe-area-inset-top：安全區域距離頂部邊界距離;在劉海全屏的時候 top 爲 44px
safe-area-inset-bottom：安全區域距離底部邊界距離;劉海全屏的條件下是 34px
css 函數 env() 和 constant()
上面兩個函數可以直接使用變量函數，只有在 webkit 內核下才支持
env() 必須在 ios >= 11.2 才支持
constant() 必須 ios < 11.2 支持
env 和 constant 只有在 viewport-fit=cover 時候才能生效
兼容前後版本,例子：
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);