來自騰訊 ISUX 社交用戶體驗設(shè)計中心設(shè)計師對于 iPhone X適配 H5頁面的解決方案。

目前的 H5 頁面可以分為通欄頁面和非通欄頁面兩種，每種頁面都可能有底部操作欄，具體如下：

通欄頁面

頂部通欄

某些業(yè)務(wù)的一級頁面多數(shù)使用了頂部通欄 banner 的效果，由于 iPhone X 在狀態(tài)欄增加了24px的高度，對于現(xiàn)在通欄 banner 規(guī)范的內(nèi)容區(qū)域會有遮擋情況。

解決方案：對于通欄頁面在頁面頂部增加一層高度44px的黑色適配層，整個頁面往下挪44px。

這種做法雖然不符合蘋果要求的設(shè)計規(guī)范，但由于短時間內(nèi)更新全部 banner 的成本太高，可以先這樣簡單處理，后續(xù)再優(yōu)化 banner 的設(shè)計展現(xiàn)。

底部 Tab 欄 / 操作欄

有些頁面使用了底部 Tab 欄 / 操作欄，由于 iPhone X 去掉了底部 Home 鍵，取而代之是34px高度的 Home Indicator ，對于目前的底部 Tab 欄 / 操作欄會造成一定的阻礙。

解決方案：在頁面底部增加一層高度34px的適配層，將操作欄上移34px，顏色可以自定義。

非通欄頁面

底部 Tab 欄 / 操作欄

原因同上，在底部有34px高度的 Home Indicator ，對于目前的底部 Tab 欄 / 操作欄會造成一定的阻礙操作。

解決方案：在頁面底部增加一層高度34px的顏色塊，將操作欄上移34px，顏色可以自定義。

關(guān)于安全區(qū)域

這里可能有人會有疑問，為什么非通欄下的頁面內(nèi)容是通到底部的，而按鈕卻是在安全區(qū)域上方呢？

這個問題涉及到安全區(qū)域，iOS11 和先前版本的不同之處在于，webview 比較重視安全區(qū)域了。這意味著，如果給頁面元素設(shè)置 top: 0, 它會渲染在屏幕頂部的44px之下，也就是狀態(tài)欄下面。如果給頁面元素設(shè)置 bottom: 0, 它會渲染在屏幕底部的34px之上，也就是底部安全區(qū)域上面。

為了解決這個尷尬的情況，蘋果公司給我們提供了一個設(shè)置 viewport 的 meta 標(biāo)簽的解決方案。

viewport 可以設(shè)置的選項就是 viewport-fit, 它有三個可選值：

• contain: The viewport should fully contain the web content. 可視窗口完全包含網(wǎng)頁內(nèi)容
• cover: The web content should fully cover the viewport. 網(wǎng)頁內(nèi)容完全覆蓋可視窗口
• auto: The default value, 同contain的作用

通過給頁面設(shè)置viewport-fit=cover，可以將頁面的布局區(qū)域延伸到頁面頂部和底部。

對于通欄頁面，設(shè)置了viewport-fit的屬性，發(fā)現(xiàn)會不生效，經(jīng)過跟同事查看手 Q 源碼后發(fā)現(xiàn)，終端對于 WebView 通欄的情況設(shè)置了UIScrollViewContentInsetAdjustmentNever屬性，去除了上下安全區(qū)域的邊距，使得安全區(qū)域的上下邊距失效了。

另外提一點，經(jīng)過 2 個版本的 webview 測試，發(fā)現(xiàn) WKWebView 在渲染頁面的時候，底部按鈕在位置表現(xiàn)上不一致，可能是一個還未解決的 bug：

使用 web 方案：

根據(jù)以上的設(shè)計方案，可以這樣處理：

1. 修改頁面 viewport-fit 屬性
2. 在 H5 頁面鏈接一個 iphonex.css 來給 iPhone X 訪問的頁面增加對應(yīng)的適配層
3. 在 H5 頁面上給對應(yīng)的 dom 結(jié)構(gòu)加上適配的類名

iPhone X .css

如上，這樣做的問題是，要修改的頁面非常多，而且給頁面帶來了額外的類名，對以后的樣式移除也有一定的工作量。

另外，使用樣式給頁面頂部增加適配層，下拉頁面的時候黑色適配層會跟著一起移動：

既然使用 web 的方式來解決這個問題不是很完美，是否可以通過終端的方式給 webview 增加適配層，從而解決這個問題呢？

使用終端方案：

經(jīng)過跟終端同學(xué)的溝通，確定是可以通過終端的方式，在原生界面初始化的時候增加適配層，這樣頁面就不需要樣式處理了。

具體是通過鏈接中增加參數(shù)來進(jìn)行適配:

• 參數(shù)名:_wvx 控制 iPhone X 適配行為
• 參數(shù)名:_wvxTclr 控制頂部適配層顏色
• 參數(shù)名:_wvxBclr 控制底部適配層顏色

對于頂部通欄的頁面，通過加 URL 參數(shù)來增加頂部黑色適配層。

對于有底部操作欄（包括通欄和非通欄），通過加 URL 參數(shù)來增加底部適配層以及設(shè)置顏色。

（這里的 wvx=10 為 2 和 8 兩個特性數(shù)字相加）

這樣，無需寫一行代碼，只需要給頁面鏈接增加適配參數(shù)，就可以完美適配 iPhone X 了~

更多具體技術(shù)實現(xiàn)可以查看這里：https://ayogo.com/blog/ios11-viewport/

作者：騰訊ISUX

來源：https://zhuanlan.zhihu.com/p/30840440

題圖來自PEXELS，基于CC0協(xié)議