iphonex手機取消了實體home鍵，取而代之的是主介面底部不顯眼的橫條「home indicator」。當網頁底部fixed 元素時候，一部分元素可能就被這個橫條遮擋住，怎麼適配解決呢？
第一步：
第二步：
頁面主體內容限定在安全區域內,如果不設定這個值，可能存在小黑條遮擋頁面最底部內容的情況
body
第三步：
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))
}**
處理iphoneX底部的橫條
iphonex手機取消了實體home鍵，當網頁底部fixed 元素時候，一部分元素可能就被這個橫條遮擋住，怎麼適配解決呢？1 2 頁面主體內容限定在安全區域內,如果不設定這個值，可能存在小黑條遮擋頁面最底部內容的情況 body 3 fixed 元素的適配 給fixed元素新增以下屬性 第一種 pad...
如何用css適配iphoneX底部橫條？！？
比如我寫了乙個底部按鈕，漂浮在所有內容的上方，以下 當在iphonex的時候，就會被遮擋大約20px 正常手機使用的 外層盒子 hasbtn padding 底部定位的按鈕 bottom button box解決辦法 使用css適配到有橫條的手機，把外層盒子的padding bottom修改的同時，...
h5底部留白，適配iphoneX安全區域
參考文章 在meta標籤中設定viewport fit covername viewport content width device width,initial scale 1.0,minimum scale 1.0,maximum scale 1.0,user scalable no,viewp...