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

騰訊ISUX ：目前的 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 標簽的解決方案。

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è)計方案，可以這樣處理：

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

△ ?iPhone X .CSS

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

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

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

使用終端方案：

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

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

• 參數(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/。

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

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

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

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

設(shè)計導航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導航，設(shè)計師必備：http://hao.uisdc.com