iPhone X web 設計

zhaochuan 7年前發布 | 18K 次閱讀 HTML 移動開發

iPhone X web 設計

開發者無需進行任何設置，在iPhone X中，Safari 就可以完美的在全面屏上顯示你既有的網站。網頁內容會自動插入到顯示的安全區域以至于不會被圓角和設備的傳感器區域（劉海）遮擋。

插入區域會以在 <body> 或者 <head> 元素中定義的 background-color 為填充，從而與頁面的其余部分相融合。對于大多數網站而言，這就足夠了。如果你的頁面僅僅包含文本和圖像以及它們下面的背景顏色，默認的插入方式看起來就不錯。

像下面那樣的頁面，特別是設計了100%屏幕寬度的水平導航條的頁面，可以選擇進一步去充分利用新屏幕的特性。 iPhone X 人際交互指南詳細介紹了一些要注意的一般設計原則， UIKit文檔也提到了原生應用程序可以采用特定的機制來確保他們看起來不錯。你的網站可以使用iOS 11 中新引入的幾個WebKit API來充分利用iPhone X 屏幕的特性。

Safari 默認的插入方式。

讓內容占據整個屏幕

第一個在 iOS 11 上使用的新功能是 viewport-fit , 它是對現有 viewport 標簽 meta 的擴展，它可以控制內容插入的方式。

viewport-fit 默認為 auto ,這將導致上述自動排版行為。你可以將 viewport-fit 設置為 cover 來禁用該行為并使頁面布局到屏幕的完整大小。代碼如下：

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

刷新之后，導航欄占據了整個屏幕的寬度，看起來順眼多了。然而，你會發現頁面的一部分被“劉海”遮住了，而且底部的導航條非常難用。這也是為什么我們要重視系統的安全插入區域。

使用 viewport-fit=cover 填充整個屏幕

重視安全區域

將 viewport-fit=cover 之后，為了使頁面可用，我們必須選擇性的給重要內容添加內填充以確保她們不會被屏幕的形狀（劉海）遮住。這將使得一個頁面可以充分利用 iPhone X 上增加的屏幕空間，同時動態調整以避免被角落，傳感器外殼（劉海）和用于訪問主屏幕的指示器遮住內容。

iPhone X 橫屏下的安全區域和非安全區域，圖中的標識為插距（插入距離）常量。*

為了實現上述效果，iOS 11 中的WebKit增加了一個名為 constant() 的新 CSS 函數和四個預定義的常量 , 它們分別是 safe-area-inset-left ， safe-area-inset-right ， safe-area-inset-top 和 safe-area-inset-bottom 。當組合使用時，這允許樣式聲明引用每側安全區域的當前大小。

CSS 工作小組最近決定添加這些功能，但名稱不太一樣，使用時請務必記住這一點。

任何使用 var() 地方都可以使用 constant() - 如下面的例子，給padding賦值。

.post {
    padding: 12px;
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
}

對于不支持 constant() 的瀏覽器，包含它的樣式將被忽略，因此在使用 constant() 時請務必為每個樣式添加 fallback。

重視安全區域，因此重要的的內容才不會被遮擋。

兩全其美，max() & min ()

本節介紹 iOS 11中當前未包含的功能。

如果你在網站設計中采用了安全區域插入常數，你可能會注意到，除了安全區域插入之外，你還需要指定最小的內填充。在上面頁面中，如果我們把12px的左填充換成 constant(safe-area-inset-left) ，當設備旋轉回垂直方向時，左邊的安全插入距離變成了0px,文本便緊貼著屏幕邊緣了。

安全插距并不能替代邊距。

為了解決這個問題，我們想指定默認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));
    }
}

使用@support做功能檢測很必要，因為現在所有的瀏覽器杜不支持這兩個函數，并且由于CSS對無效變量的處理，我們需要在@supports查詢不確定是否支持的功能再去使用。

在我們的示例頁面中，設備處于垂直方向時， constant(safe-area-inset-left) 解析為0px,因此 max() 函數返回的是12px。在橫屏時，由于存在“劉海”， max() 函數返回的是較大的 constant(safe-area-inset-left) ，因此可以確保重要的內容總是在可視區域之內。

使用max()將安全區域插距與傳統邊距組合。

有經驗的Web開發人員可能以前遇到過“CSS鎖”機制，通常用于將CSS屬性綁定到特定范圍的值。min() 和 max() 一起使用使得這更容易，并將有助于實現有效的響應式設計。

來自： https://webkit.org/blog/7929/designing-websites-for-iphone-x/

本文由用戶 zhaochuan 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1506337262578.html

HTML 移動開發

iPhone X web 設計