[譯] iPhone X 網頁設計

Hyde發表於2017-10-17
iPhone網頁

在最新發布 iPhone X 的全面屏上，Safari 可以精美地顯示現有的網站。內容自動嵌入到螢幕的安全區域內，以免被圓角、原深感攝像頭系統的空間遮擋住。

凹槽部分填充了頁面的 background-color (比如指定為 <body> 或 <html> 元素的背景顏色)，這樣就和頁面其餘部分混合在一起。對於許多網站來說，這已經足夠了。如果你的頁面在背景色上只有文字和圖片，那麼預設的凹槽部分看起來也非常不錯。

對於其他頁面 —— 特別是那些設計全寬水平導航欄的頁面，比如像下圖的頁面，可以選擇稍微深入一點，充分利用新顯示的功能。 iPhone X 人機介面指南 詳細介紹了一些通用的設計原則，並且 UIKit 文件 討論了原生 app 可以採用的特定機制，以確保它們看起來不錯。你的網站可以利用 iOS 11 中引入的一些類似 WebKit API 來充分利用顯示器邊緣到邊緣的特性。

在閱讀這篇文章的時候，你可以點選任何圖片來訪問相應的 Demo 頁，並檢視原始碼：

Safari's default insetting behavior
Safari's default insetting behavior

Safari 的預設內嵌行為。

使用整個螢幕

第一個新特性是對現有 viewport meta 標籤的擴充套件，稱為 viewport-fit，它提供對嵌入行為的控制。在 iOS 11 中可以使用 viewport-fit。

viewport-fit 的預設值是 auto，會引起自動嵌入行為的效果。為了使該行為失效，並使頁面全螢幕顯示，你可以設定 viewport-fit:cover 為 cover。在這樣做之後，我們的 viewport meta 標記看起來像這樣：

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>複製程式碼

重新載入後，導航欄顯示成邊緣到邊緣的樣子，看起來好多了。然而，很明顯，為什麼注意系統的安全區域內嵌很重要：一些頁面的內容被原深感攝像頭系統的空間遮擋了，而底部的導航欄非常難以使用。

viewport-fit=cover
viewport-fit=cover

用 viewport-fit=cover 適配全面屏.

注意安全區域

為了在採用 viewport-fit=cover 之後頁面還可用，下一步要做的是選擇性地給包含重要內容的元素加上 padding，以確保元素不會被螢幕的形狀所遮擋。生成的頁面會充分利用 iPhone X 上增加的螢幕空間，同時動態調整避免四個角落、原深感攝像頭系統的空間靠近主螢幕。

Safe and Unsafe Areas
Safe and Unsafe Areas

iPhone X 橫屏時的安全區和非安全區（帶預設內嵌數值）

為了實現這一點，iOS 11 中的 WebKit 新增了一個 CSS 函式，constant()，以及一組 四個預定義的常量： safe-area-inset-left, safe-area-inset-right, safe-area-inset-top 和 safe-area-inset-bottom。當合並使用時，允許樣式使用每個方向的安全區域的大小。

CSS 工作組 最近決定新增這個特性，但是使用了不同的名稱，請記住這一點。

constant() 功能類似於 var()，比如下面的示例，在 padding 屬性使用：

.post {
    padding: 12px;
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
}複製程式碼

對於不支援 constant() 的瀏覽器，包含 constant() 的樣式將被忽略。因此，重要的是要對使用 constant() 的樣式另外使用替代樣式。

Safe area constants
Safe area constants

注意安全區內嵌，使重要內容可見。

使用 min() 和 max() 將其全部組合在一起

本節介紹目前 iOS 11 還沒有實現的特性。

如果在網站設計中採用 constant() 來設定安全區域，你可能會注意到，在設定安全區域時，很難指定最小的 padding。在上面的頁面中，我們把 12 px 的左填充替換成 constant(safe-area-inset-left)，當回到豎屏時，左側的安全區域變成了 0 px，文字立即緊靠螢幕邊緣。

No margins
No margins

安全區域內嵌不能替代邊距。

要解決這個問題，我們需要指定 padding 應該是預設的 padding 或安全區域中較大的那個。這可以用 全新的 CSS 函式 min() 和 max() 來實現，這將在未來的 Safari 預覽版本中提供相應的支援。兩個函式都採用任意數量的引數，並返回最小值或最大值。它們可以在 calc() 中使用，或者巢狀在一起，這兩個函式都允許像 calc() 一樣的數學計算。

比如像下面這樣的示例，可以這樣使用 max() ：

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, constant(safe-area-inset-left));
        padding-right: max(12px, constant(safe-area-inset-right));
    }
}複製程式碼

使用 @supports 來檢測 min 和 max 很重要，因為並不是任何瀏覽器都支援，根據 CSS 的 無效變數處理，不要在 @supports 查詢中指定變數。

在示例頁面中，豎屏時 constant(safe-area-inset-left) 解析為 0 px，因此 max() 解析為 12 px。橫屏時，由於感應器空間的存在，設定 constant(safe-area-inset-left) 的值會變得更大，而 max() 這個函式將會解析這個大小，以確保重要內容始終可見。

max() with safe area insets
max() with safe area insets

max() 將安全區內嵌與傳統邊距結合

有經驗的 Web 開發人員以前可能遇到過 CSS 鎖機制，通常用於將 CSS 屬性設定在特定範圍的值中。一起使用 min() 和 max() 會讓事情變得更加容易，並且將有助於在未來實現有效的響應式設計。

反饋和問題

現在你可以在 Xcode 9 中 iPhone X 模擬器的 Safari 開始採用 viewport-fit 和安全區內嵌。很樂意聽到所有特性被採納，請隨時將反饋和問題傳送到 web-evangelist@apple.com 或者在 Twitter 上 @webkit，並將 bug 都提交到 WebKit 的 bug 跟蹤器。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章