剖析 iOS 11 網頁適配問題

最新 09-22

前言

前天剛分享一個比較變態的交互實現：【第1062期】藉助CSS Shapes實現元素滾動自動環繞iPhone X的劉海。今日早讀文章由@鄧映山投稿分享。

正文從這開始～

北京時間 9 月 12 日凌晨，蘋果在喬布斯劇院發布了 iPhone X。iPhone X 正面的全面屏上方有一條劉海，對於如何適配 iPhone X，蘋果的 Human Interface Guidelines 文檔已經給出詳細的說明。

蘋果對於 iPhone X 的設計布局意見如下：

核心內容應該處於 Safe area 確保不會被設備圓角(corners)，感測器外殼(sensor housing，齊劉海) 以及底部的 Home Indicator 遮擋。

本文將剖析兩則在 iPhone X 異形屏和 iOS 11 網頁適配中遇到的問題及解決方案。

iPhone X Safari 橫屏顯示左右白邊問題

iPhone X Safari 在橫屏狀態下，網頁左右兩側可能會出現白邊，如下：

因為 iPhone X 會將網頁內容顯示在 Safe area 導致的，解決這一問題，我們需要將背景顏色填充整個屏幕區域，而網頁內容處於 Safe area。

解決方案一：background-color

如果網頁設置了一個背景顏色，那麼最簡單解決方案是，在 body 節點設置 background-color，使背景顏色填充整個屏幕，從而解決橫屏顯示左右白邊的問題

解決方案二：viewport-fit + safe-area-inset-*

在 iOS 11 中蘋果為 Web 新增兩個內容 viewport-fit + safe-area-inset-*

注意：viewport-fit 和 safe-area-inset-* 只對於 WKWebView 有效，在 UIWebView 中無效

viewport-fit 用於設置網頁在可視窗口的布局方式

文檔：CSS Round Display Spec

這個屬性可設置為：

contain: The viewport should fully contain the web content. 可視窗口完全包含網頁內容

cover: The web content should fully cover the viewport. 網頁內容完全覆蓋可視窗口

auto: The default value, contain

對於 iPhone X 之前的 iPhone 設備屏幕為規則的矩形，網頁內容都可以完整展示；但是對於 iPhone X 是異形屏幕，通過 viewport-fit 可以設置網頁內容在可視窗口中的顯示規則，通過下圖可以輔助理解

我們知道默認情況下 viewport-fit=auto 即為 viewport-fit=contain，在 iPhone X 中，相當於網頁內容展示在 Safe area，這樣也就是橫屏顯示時出現白邊的原因了，所以我們可以設置 viewport-fit=cover 即可解決問題

注意到應用 viewport-fit=cover 之後，網頁右上角，menu 按鍵和 in 按鍵被圓角，感測器外殼（齊劉海）裁剪掉了

safe-area-inset-*

在設置 viewport-fit=cover 之後，Web 中會新增四個常量：

safe-area-inset-top

safe-area-inset-right

safe-area-inset-left

safe-area-inset-bottom

分別表示 Safe area 和可視窗口 viewport 頂部，右邊，左邊，底部的間距，可以用於設置 margin, padding, 或者絕對定位時 left, top

注意：在橫屏和豎屏狀態下，safe-area-inset-* 的值不同

為了解決應用 viewport-fit=cover 之後，有些顯示內容被裁剪的問題，我們可以通過添加邊距使得網頁主要內容處於 Safe area 中不被裁剪，解決方式如下：

padding:constant(safe-area-inset-top)constant(safe-area-inset-right)constant(safe-area-inset-bottom)constant(safe-area-inset-left);

iOS 11 WebView 中狀態欄問題

問題描述：

在 iOS 11 由於 safe area，狀態欄的表現有點不同。如果頁面頂部有一個 header bar，設置 position: fixed; top: 0px; 那麼頁面滾動過程中，會出現如下問題：

GIF/1353K

header bar 沒有固定在最頂部，上下滾動過程中，我們可以看到網頁內容從 status bar 下方穿過

重現問題：

創建一個 iOS 項目，視圖中添加一個 WKWebView，載入百度首頁

-(void)viewDidLoad{

[superviewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

WKWebView*webView=[[WKWebView alloc]initWithFrame:self.view.bounds];

[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];

[self.view addSubview:webView];

}

剖析問題：

1、這個問題同樣也是由於 safe area 導致，雖然 header bar 位置信息為 position: fixed; top: 0px;，但這個位置也是相對於 safe area 而言的，所以看到 header bar 並沒有位於屏幕最頂部。在 viewport meta 標籤，添加 viewport-fit=cover 即可解決此問題