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

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

來自騰訊 ISUX 社交用戶體驗設計中心設計師對于 iPhone X適配 H5頁面的解決方案。

目前的 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 方案：

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

  1. 修改頁面 viewport-fit 屬性
  2. 在 H5 頁面鏈接一個 iphonex.css 來給 iPhone X 訪問的頁面增加對應的適配層
  3. 在 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/

 

作者：騰訊ISUX

來源：https://zhuanlan.zhihu.com/p/30840440

題圖來自PEXELS，基于CC0協議

更多精彩內容，請關注人人都是產品經理微信公眾號或下載App
騰訊ISUX
騰訊ISUX用戶體驗與設計部
289篇作品 3543170總閱讀量
04-102034 瀏覽
B站UP主停更背后
03-214040 瀏覽
聰明的產品經理都會用哪些經濟學思維？
06-282390 瀏覽
網約車市場，飽和了？
04-123001 瀏覽
運營活動品牌 – 「寶藏中國」的年輕化升級
08-173909 瀏覽
TikTok大搞貨架電商，目標100億美元
評論
評論請登錄

  1. 安全區域那邊的解決方案竟然沒看懂 ??

    來自江蘇 回復

  2. ?? 我竟然都看懂了 我可能是個假產品

    來自廣東 回復