資訊專欄INFORMATION COLUMN
摘要：第三步元素的適配類型一完全吸底元素類型二非完全吸底元素，比如返回頂部側邊廣告等第四步如果我們只希望才需要新增適配樣式，我們可以配合來隔離兼容樣式
第一步：設置網頁在可視窗口的布局方式
ios11新增 viweport-fit 屬性，使得頁面內容完全覆蓋整個窗口：
第二步：頁面主體內容限定在安全區域內
env() 和 constant()ios11新增特性
● safe-area-inset-left：安全區域距離左邊邊界距離
● safe-area-inset-right：安全區域距離右邊邊界距離
● safe-area-inset-top：安全區域距離頂部邊界距離
● safe-area-inset-bottom：安全區域距離底部邊界距離
這里我們只需要關注 safe-area-inset-bottom 這個變量，因為它對應的就是小黑條的高度（橫豎屏時值不一樣）。
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
第三步：fixed 元素的適配
● 類型一：fixed 完全吸底元素（bottom = 0）
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
● 類型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回頂部”、“側邊廣告” 等
{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
第四步：如果我們只希望 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);
}
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107517.html
摘要：由于做了全面屏并且還保留一塊小劉海，因此很多以前的移動端頁面需要結合客戶端做出相應的適配，具體如下頂部通欄之前的客戶端一直采用狀態欄導航欄的做法。這時候需要底部留出一塊空白安全區域，頁面內容最終的底線應在手機拐角處。該安全區域的高度為。 由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動端H5頁面需要結合App客戶端做出相應的適配，具體如下： 1、頂部通欄 之前的客戶...
摘要：由于做了全面屏并且還保留一塊小劉海，因此很多以前的移動端頁面需要結合客戶端做出相應的適配，具體如下頂部通欄之前的客戶端一直采用狀態欄導航欄的做法。這時候需要底部留出一塊空白安全區域，頁面內容最終的底線應在手機拐角處。該安全區域的高度為。 由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動端H5頁面需要結合App客戶端做出相應的適配，具體如下： 1、頂部通欄 之前的客戶...
摘要：由于做了全面屏并且還保留一塊小劉海，因此很多以前的移動端頁面需要結合客戶端做出相應的適配，具體如下頂部通欄之前的客戶端一直采用狀態欄導航欄的做法。這時候需要底部留出一塊空白安全區域，頁面內容最終的底線應在手機拐角處。該安全區域的高度為。 由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動端H5頁面需要結合App客戶端做出相應的適配，具體如下： 1、頂部通欄 之前的客戶...
閱讀 3077·2019-08-30 15:56
閱讀 1234·2019-08-29 15:20
閱讀 1571·2019-08-29 13:19
閱讀 1473·2019-08-29 13:10
閱讀 3381·2019-08-26 18:27
閱讀 3069·2019-08-26 11:46
閱讀 2234·2019-08-26 11:45
閱讀 3753·2019-08-26 10:12
