當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

iPhone X Web 设计

發布時間：2023/12/10 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 iPhone X Web 设计小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

iPhone X Web 設計

原文地址：https://webkit.org/blog/7929/designing-websites-for-iphone-x/

開箱即用(開發者無需進行任何設置)，在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來禁用該行為并使頁面布局到屏幕的完整大小。代碼如下：

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

使用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://www.cnblogs.com/jiye123/p/7999235.html

總結

以上是生活随笔為你收集整理的iPhone X Web 设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Web
iPhone