iPhone X 適配 手Q H5頁面通用解決方案

3 評論 6107 瀏覽 40 收藏 9 分鐘

來自騰訊 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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 安全區(qū)域那邊的解決方案竟然沒看懂 ??

    來自江蘇 回復(fù)
  2. ?? 我竟然都看懂了 我可能是個假產(chǎn)品

    來自廣東 回復(fù)