前言
iPhoneX 取消了物理按鍵，改成底部小黑條，這一改動導(dǎo)致網(wǎng)頁出現(xiàn)了比較尷尬的屏幕適配問題。對于網(wǎng)頁而言，頂部（劉海部位）的適配問題瀏覽器已經(jīng)做了處理，所以我們只需要關(guān)注底部與小黑條的適配問題即可（即常見的吸底導(dǎo)航、返回頂部等各種相對底部 fixed 定位的元素）。
筆者通過查閱了一些官方文檔，以及結(jié)合實(shí)際項(xiàng)目中的一些處理經(jīng)驗(yàn)，整理了一套簡單的適配方案分享給大家，希望對大家有所幫助，以下是處理前后效果圖：
適配之前需要了解的幾個(gè)新知識
安全區(qū)域
安全區(qū)域指的是一個(gè)可視窗口范圍，處于安全區(qū)域的內(nèi)容不受圓角（corners）、齊劉海（sensor housing）、小黑條（Home Indicator）影響，如下圖藍(lán)色區(qū)域：
也就是說，我們要做好適配，必須保證頁面可視、可操作區(qū)域是在安全區(qū)域內(nèi)。
更詳細(xì)說明，參考文檔：Human Interface Guidelines – iPhoneX
viewport-fit
iOS11 新增特性，蘋果公司為了適配 iPhoneX 對現(xiàn)有 viewport meta 標(biāo)簽的一個(gè)擴(kuò)展，用于設(shè)置網(wǎng)頁在可視窗口的布局方式，可設(shè)置三個(gè)值：
- contain: 可視窗口完全包含網(wǎng)頁內(nèi)容（左圖）
- cover：網(wǎng)頁內(nèi)容完全覆蓋可視窗口（右圖）
- auto：默認(rèn)值，跟 contain 表現(xiàn)一致
注意：網(wǎng)頁默認(rèn)不添加擴(kuò)展的表現(xiàn)是 viewport-fit=contain，需要適配 iPhoneX 必須設(shè)置 viewport-fit=cover，這是適配的關(guān)鍵步驟。
更詳細(xì)說明，參考文檔：viewport-fit-descriptor
constant 函數(shù)
iOS11 新增特性，Webkit 的一個(gè) CSS 函數(shù)，用于設(shè)定安全區(qū)域與邊界的距離，有四個(gè)預(yù)定義的變量：
- safe-area-inset-left：安全區(qū)域距離左邊邊界距離
- safe-area-inset-right：安全區(qū)域距離右邊邊界距離
- safe-area-inset-top：安全區(qū)域距離頂部邊界距離
- safe-area-inset-bottom：安全區(qū)域距離底部邊界距離
這里我們只需要關(guān)注 safe-area-inset-bottom 這個(gè)變量，因?yàn)樗鼘?yīng)的就是小黑條的高度（橫豎屏?xí)r值不一樣）。
注意：當(dāng) viewport-fit=contain 時(shí) constant 函數(shù)是不起作用的，必須要配合 viewport-fit=cover 使用。對于不支持 constant 的瀏覽器，瀏覽器將會忽略它。
官方文檔中提到 env 函數(shù)即將要替換 constant 函數(shù)，筆者測試過暫時(shí)還不可用。
更詳細(xì)說明，參考文檔：Designing Websites for iPhone X
如何適配
了解了以上所說的幾個(gè)知識點(diǎn)，接下來我們適配的思路就很清晰了。
第一步：設(shè)置網(wǎng)頁在可視窗口的布局方式
新增 viweport-fit 屬性，使得頁面內(nèi)容完全覆蓋整個(gè)窗口：
<figure class="highlight html" style="box-sizing: border-box; display: block; margin: 0px; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; color: rgb(77, 77, 76);">
|
1
|
<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>
|
</figure>
前面也有提到過，只有設(shè)置了 viewport-fit=cover，才能使用 constant 函數(shù)。
第二步：頁面主體內(nèi)容限定在安全區(qū)域內(nèi)
這一步根據(jù)實(shí)際頁面場景選擇，如果不設(shè)置這個(gè)值，可能存在小黑條遮擋頁面最底部內(nèi)容的情況。
<figure class="highlight css" style="box-sizing: border-box; display: block; margin: 0px; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; color: rgb(77, 77, 76);">
|
1
2
3
|
body {
padding-bottom: constant(safe-area-inset-bottom);
}
|
</figure>
第三步：fixed 元素的適配
類型一：fixed 完全吸底元素（bottom = 0），比如下圖這兩種情況：
可以通過加內(nèi)邊距 padding 擴(kuò)展高度：
<figure class="highlight css" style="box-sizing: border-box; display: block; margin: 0px; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; color: rgb(77, 77, 76);">
|
1
2
3
|
{
padding-bottom: constant(safe-area-inset-bottom);
}
|
</figure>
或者通過計(jì)算函數(shù) calc 覆蓋原來高度：
<figure class="highlight css" style="box-sizing: border-box; display: block; margin: 0px; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; color: rgb(77, 77, 76);">
|
1
2
3
|
{
height: calc(60px(假設(shè)值) + constant(safe-area-inset-bottom));
}
|
</figure>
注意，這個(gè)方案需要吸底條必須是有背景色的，因?yàn)閿U(kuò)展的部分背景是跟隨外容器的，否則出現(xiàn)鏤空情況。
還有一種方案就是，可以通過新增一個(gè)新的元素（空的顏色塊，主要用于小黑條高度的占位），然后吸底元素可以不改變高度只需要調(diào)整位置，像這樣：
<figure class="highlight css" style="box-sizing: border-box; display: block; margin: 0px; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; color: rgb(77, 77, 76);">
|
1
2
3
|
{
margin-bottom: constant(safe-area-inset-bottom);
}
|
</figure>
空的顏色塊：
<figure class="highlight css" style="box-sizing: border-box; display: block; margin: 0px; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; color: rgb(77, 77, 76);">
|
1
2
3
4
5
6
7
|
{
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
background-color: #fff;
}
|
</figure>
類型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回頂部”、“側(cè)邊廣告” 等
像這種只是位置需要對應(yīng)向上調(diào)整，可以僅通過外邊距 margin 來處理：
<figure class="highlight css" style="box-sizing: border-box; display: block; margin: 0px; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; color: rgb(77, 77, 76);">
|
1
2
3
|
{
margin-bottom: constant(safe-area-inset-bottom);
}
|
</figure>
或者，你也可以通過計(jì)算函數(shù) calc 覆蓋原來 bottom 值：
<figure class="highlight css" style="box-sizing: border-box; display: block; margin: 0px; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; color: rgb(77, 77, 76);">
|
1
2
3
|
{
bottom: calc(50px(假設(shè)值) + constant(safe-area-inset-bottom));
}
|
</figure>
別忘了使用 @supports
寫到這里，我們常見的兩種類型的 fixed 元素適配方案已經(jīng)了解了吧，但別忘了，一般我們只希望 iPhoneX 才需要新增適配樣式，我們可以配合 @supports 這樣編寫樣式：
<figure class="highlight css" style="box-sizing: border-box; display: block; margin: 0px; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; color: rgb(77, 77, 76);">
|
1
2
3
4
5
|
@supports (bottom: constant(safe-area-inset-bottom)) {
div {
margin-bottom: constant(safe-area-inset-bottom);
}
}
|
</figure>
寫在最后
以上幾種方案僅供參考，筆者認(rèn)為，現(xiàn)階段適配處理起來是有點(diǎn)折騰，但是至少能解決，具體需要根據(jù)頁面實(shí)際場景，在不影響用戶體驗(yàn)與操作的大前提下不斷嘗試與探索，才能更完美的適配。
