H5頁面如何適配iPhone X ?騰訊設計師給出了通用解決方案! - 優設網 - UISDC

H5頁面如何適配iPhone X ?騰訊設計師給出了通用解決方案!

2017/11/08 25055評論區

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

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/h5-ui-iphonex-adaptation

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

sketch 界面設計 版式設計 排版布局 職場 優設專訪 設計師干貨 優設大課堂 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 設計規范 海報設計 設計趨勢 用戶體驗設計 動效設計 平面設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里