以下是處理前后效果圖:
適配之前需要了解的幾個新知識
安全區域
安全區域指的是一個可視窗口范圍,處于安全區域的內容不受圓角(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);?
??}?
}?