編者按：騰訊的設計師用王者榮耀的H5 頁面案例，幫你學會給iPhone X 做適配。

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

一. 通欄頁面

頂部通欄

某些業務的一級頁面多數使用了頂部通欄 banner 的效果，由于 iPhone X 在狀態欄增加了24px的高度，對于現在通欄 banner 規范的內容區域會有遮擋情況。

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

這種做法雖然不符合蘋果要求的設計規范，但由于短時間內更新全部 banner 的成本太高，可以先這樣簡單處理，后續再優化 banner 的設計展現。

底部 Tab 欄 / 操作欄

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

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

二. 非通欄頁面

底部 Tab 欄 / 操作欄

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

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

三. 關于安全區域

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

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

為了解決這個尷尬的情況，蘋果公司給我們提供了一個設置 Viewport的 Meta 標簽的解決方案。

Viewport 可以設置的選項就是 Viewport—fit，它有三個可選值：

• Contain：The viewport should fully contain the web content. 可視窗口完全包含網頁內容。
• Cover：The web content should fully cover the viewport. 網頁內容完全覆蓋可視窗口。
• Auto：The default value，同 Contain 的作用。

通過給頁面設置Viewport—fit=cover，可以將頁面的布局區域延伸到頁面頂部和底部。

對于通欄頁面，設置了Viewport—fit 的屬性，發現會不生效，經過跟同事查看手 Q 源碼后發現，終端對于 WebView 通欄的情況設置了UIScrollViewContentInsetAdjustmentNever屬性，去除了上下安全區域的邊距，使得安全區域的上下邊距失效了。

另外提一點，經過 2 個版本的 Webview 測試，發現 WKWebview 在渲染頁面的時候，底部按鈕在位置表現上不一致，可能是一個還未解決的 Bug：

四. 使用 Web 方案：

根據以上的設計方案，可以這樣處理：

• 修改頁面 Viewport—fit 屬性。
• 在 H5 頁面鏈接一個 iphonex.CSS 來給 iPhone X 訪問的頁面增加對應的適配層。
• 在 H5 頁面上給對應的 Dom 結構加上適配的類名。

△ ?iPhone X .CSS

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

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

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

使用終端方案：

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

具體是通過鏈接中增加參數來進行適配:

• 參數名：_Wvx 控制 iPhone X 適配行為。
• 參數名：_WvxTclr 控制頂部適配層顏色。
• 參數名：_WvxBclr 控制底部適配層顏色。

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

對于有底部操作欄「包括通欄和非通欄」，通過加 URL 參數來增加底部適配層以及設置顏色。

△ ?這里的 WVX=10 為 2 和 8 兩個特性數字相加

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

更多具體技術實現可以查看這里：https://ayogo.com/blog/ios11-viewport/。

「干貨十足！最全面的iPhoneX學習資源」

• 《最新版iOS 11設計規范發布了，來下載官方源文件！》
• 《優設首發！iPhone X 官方人機交互指南中文版》
• 《取消了Home鍵的 iPhone X，交互方式都有哪些變化？》
• 《谷歌設計師：如何評價新版 iPhone X 的設計規范？》
• 《動手試試！手把手教你如何適配 iPhone X》
• 《優設首發！800M高質量的iPhone X+8展示模板免費打包下載》

================明星欄目推薦================

優優教程網： UiiiUiii.com?是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com