來自騰訊ISUX社交用戶體驗(yàn)設(shè)計(jì)中心的設(shè)計(jì)師為iPhone X Fit H5頁面。

當(dāng)前的H5頁面可以分為兩種類型：標(biāo)題頁面和非端口頁面。每個頁面可能都有一個底部操作欄，如下所示：

橫幅頁面頂部橫幅

某些商家的大多數(shù)第一級頁面都使用頂部橫幅的效果。由于iPhone X在狀態(tài)欄中添加了24px，因此當(dāng)前橫幅規(guī)范的內(nèi)容區(qū)域中存在遮擋。

解決方案：對于標(biāo)題頁，在頁面頂部添加一層44px黑色適應(yīng)層，并將整個頁面向下移動44px。

雖然這種方法不符合Apple要求的設(shè)計(jì)規(guī)范，但由于在短時(shí)間內(nèi)更新所有橫幅的成本太高，可以像這樣簡單處理，然后優(yōu)化橫幅的設(shè)計(jì)。

底部標(biāo)簽欄/操作欄

有些頁面使用底部的標(biāo)簽欄/操作欄。由于iPhone X移除了底部的Home按鈕并將其替換為34px高度的Home Indicator，因此它可能成為當(dāng)前底部Tab/Operation欄的障礙。

解決方案：在頁面底部添加一層高度為34px的適配層，將操作欄移動到34px，顏色可以自定義。

非條形頁面底部標(biāo)簽欄/操作欄

出于同樣的原因，底部高度為34px的Home Indicator會對當(dāng)前底部Tab/Operation Bar造成一些障礙。

解決方案：在頁面底部添加一層高度為34px的圖層，將操作欄移動到34px，顏色可以自定義。

關(guān)于安全區(qū)域

有人可能會有問題，為什么非通行條下的頁面內(nèi)容會顯示在底部，而按鈕位于安全區(qū)域上方？

此問題與安全區(qū)有關(guān)。 iOS11與之前版本的區(qū)別在于webview更加關(guān)注安全區(qū)域。這意味著如果為頁面元素設(shè)置頂部: 0，它將在屏幕頂部（位于狀態(tài)欄下方）呈現(xiàn)低于44px。如果將底部: 0設(shè)置為頁面元素，它將呈現(xiàn)在屏幕底部的34px上方，該位于底部安全區(qū)域之上。

為了解決這種尷尬局面，Apple為我們提供了設(shè)置視口元標(biāo)記的解決方案。

視口可以設(shè)置的選項(xiàng)是viewport-fit，它有三個可選值：

包含:視口應(yīng)完全包含Web內(nèi)容。可視窗口完全包含Web內(nèi)容

封面: Web內(nèi)容應(yīng)完全覆蓋視口。 Web內(nèi)容完全覆蓋可見窗口

Auto:默認(rèn)值，包含

通過將viewport-fit=cover設(shè)置到頁面，您可以將頁面的布局區(qū)域擴(kuò)展到頁面的頂部和底部。

對于標(biāo)題頁面，設(shè)置了viewport-fit的屬性，并且發(fā)現(xiàn)它不會生效。在與同事檢查源代碼后，發(fā)現(xiàn)終端為WebView橫幅設(shè)置了UIScrollViewContentInsetAdjustmentNever屬性，并刪除了上下安全區(qū)域的邊距，使得安全區(qū)域的上邊距和下邊距都失敗了。

此外，在兩個版本的webview測試之后，發(fā)現(xiàn)WKWebView在呈現(xiàn)頁面時(shí)底部按鈕的位置不一致，這可能是一個未解決的錯誤：

使用網(wǎng)絡(luò)計(jì)劃：

根據(jù)上述設(shè)計(jì)，可以這樣處理：

修改頁面視口適合屬性

鏈接H5頁面上的iphonex.css，將相應(yīng)的適配層添加到iPhone X訪問的頁面

將相應(yīng)的類名添加到H5頁面上相應(yīng)的dom結(jié)構(gòu)

iPhone X .css

如上所述，問題在于有很多頁面需要修改，頁面還有一個額外的類名，它也有一定的工作量可以用于將來的樣式刪除。

此外，使用樣式將適配層添加到頁面頂部。當(dāng)頁面被拉下時(shí)，黑色適應(yīng)層將隨之移動：

由于使用網(wǎng)絡(luò)來解決這個問題并不完美，你可以通過終端向webview添加適配層來解決這個問題嗎？

使用終端計(jì)劃：

在與終端學(xué)生通信之后，確定當(dāng)通過終端初始化本機(jī)接口時(shí)可以添加適配層，從而不需要對頁面進(jìn)行樣式化。

具體而言，通過向鏈接添加參數(shù)來調(diào)整它。:

參數(shù)名稱: _wvx控制iPhone X適應(yīng)行為

參數(shù)名稱: _wvxTclr控制頂部適應(yīng)層顏色

參數(shù)名稱: _wvxBclr控制底部適應(yīng)層顏色

對于首頁，通過添加URL參數(shù)添加頂部黑色適應(yīng)層。

對于底部操作欄（包括欄和非通道欄），添加URL參數(shù)以增加底部適合圖層并設(shè)置顏色。

（這里Wwx=10是兩個特征數(shù)字2和8的總和）

這樣，你不需要編寫一行代碼，只需將適配參數(shù)添加到頁面鏈接，就可以完美地適應(yīng)iPhone X了?

更多具體的技術(shù)實(shí)現(xiàn)可以在這里找到：https://ayogo.com/blog/ios11-viewport/

作者：騰訊ISUX

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

« 微軟宣布它將收購聊天機(jī)器人啟動XOXCO | 云抓火車談?wù)摼W(wǎng)絡(luò)推廣 »