[譯] iPhone X 網頁設計

時間 2019-11-16

原文原文鏈接

原文地址：Designing Websites for iPhone X

原文做者：Timothy Horton

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：Hyde Song

校對者：Larry Vernon

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

凹槽部分填充了頁面的 background-color (好比指定爲 <body> 或 <html> 元素的背景顏色)，這樣就和頁面其他部分混合在一塊兒。對於許多網站來講，這已經足夠了。若是你的頁面在背景色上只有文本和圖片，那麼默認的凹槽部分看起來也很是不錯。html

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

在閱讀這篇文章的時候，你能夠點擊任何圖片來訪問相應的 Demo 頁，並查看源代碼：react

Safari 的默認內嵌行爲。android

使用整個屏幕

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

viewport-fit 的默認值是 auto，會引發自動嵌入行爲的效果。爲了使該行爲失效，並使頁面全屏幕顯示，你能夠設置 viewport-fit:cover 爲 cover。在這樣作以後，咱們的 viewport meta 標記看起來像這樣：git

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

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

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

注意安全區域

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

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() 的樣式另外使用替代樣式。

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

使用 min() 和 max() 將其所有組合在一塊兒

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

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

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

要解決這個問題，咱們須要指定 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() 將安全區內嵌與傳統邊距結合

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

反饋和問題

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。