阿贾克斯对热刺 www.utsvcz.com.cn

編者按:騰訊的設計師用王者榮耀的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學習資源」

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

優優教程網 UiiiUiii.com?是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄??裘夥炎匝縷?,按照我們的專欄一步步學習,一定可以迅速上手并制作出酷炫的視覺效果。

設計導航:國內人氣最高的設計網址導航,設計師必備://hao.www.utsvcz.com.cn

點贊 1
收藏 14
繼續閱讀相關文章

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
評論 收藏