[譯] iPhone X 網(wǎng)頁設(shè)計(jì)
時(shí)間：2023-09-05 23:48:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-05 23:48:01 來源：網(wǎng)站運(yùn)營(yíng)
[譯] iPhone X 網(wǎng)頁設(shè)計(jì)：
原文地址：Designing Websites for iPhone X
原文作者：Timothy Horton
譯文出自：掘金翻譯計(jì)劃
本文永久鏈接：github.com/xitu/gold-m…
譯者：Hyde Song
校對(duì)者：Larry Vernon
在最新發(fā)布 iPhone X 的全面屏上，Safari 可以精美地顯示現(xiàn)有的網(wǎng)站。內(nèi)容自動(dòng)嵌入到顯示屏的安全區(qū)域內(nèi)，以免被圓角、原深感攝像頭系統(tǒng)的空間遮擋住。
凹槽部分填充了頁面的 background-color (比如指定為 <body> 或 <html> 元素的背景顏色)，這樣就和頁面其余部分混合在一起。對(duì)于許多網(wǎng)站來說，這已經(jīng)足夠了。如果你的頁面在背景色上只有文本和圖片，那么默認(rèn)的凹槽部分看起來也非常不錯(cuò)。
對(duì)于其他頁面 —— 特別是那些設(shè)計(jì)全寬水平導(dǎo)航欄的頁面，比如像下圖的頁面，可以選擇稍微深入一點(diǎn)，充分利用新顯示的功能。 iPhone X 人機(jī)界面指南 詳細(xì)介紹了一些通用的設(shè)計(jì)原則，并且 UIKit 文檔 討論了原生 app 可以采用的特定機(jī)制，以確保它們看起來不錯(cuò)。你的網(wǎng)站可以利用 iOS 11 中引入的一些類似 WebKit API 來充分利用顯示器邊緣到邊緣的特性。
在閱讀這篇文章的時(shí)候，你可以點(diǎn)擊任何圖片來訪問相應(yīng)的 Demo 頁，并查看源代碼：
Safari 的默認(rèn)內(nèi)嵌行為。
使用整個(gè)屏幕
第一個(gè)新特性是對(duì)現(xiàn)有 viewport meta 標(biāo)簽的擴(kuò)展，稱為 viewport-fit，它提供對(duì)嵌入行為的控制。在 iOS 11 中可以使用 viewport-fit。
viewport-fit 的默認(rèn)值是 auto，會(huì)引起自動(dòng)嵌入行為的效果。為了使該行為失效，并使頁面全屏幕顯示，你可以設(shè)置 viewport-fit:cover 為 cover。在這樣做之后，我們的 viewport meta 標(biāo)記看起來像這樣：
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>重新加載后，導(dǎo)航欄顯示成邊緣到邊緣的樣子，看起來好多了。然而，很明顯，為什么注意系統(tǒng)的安全區(qū)域內(nèi)嵌很重要：一些頁面的內(nèi)容被原深感攝像頭系統(tǒng)的空間遮擋了，而底部的導(dǎo)航欄非常難以使用。
用 viewport-fit=cover 適配全面屏.
注意安全區(qū)域
為了在采用 viewport-fit=cover 之后頁面還可用，下一步要做的是選擇性地給包含重要內(nèi)容的元素加上 padding，以確保元素不會(huì)被屏幕的形狀所遮擋。生成的頁面會(huì)充分利用 iPhone X 上增加的屏幕空間，同時(shí)動(dòng)態(tài)調(diào)整避免四個(gè)角落、原深感攝像頭系統(tǒng)的空間靠近主屏幕。
iPhone X 橫屏?xí)r的安全區(qū)和非安全區(qū)（帶默認(rèn)內(nèi)嵌數(shù)值）
為了實(shí)現(xiàn)這一點(diǎn)，iOS 11 中的 WebKit 新增了一個(gè) CSS 函數(shù)，constant()，以及一組 四個(gè)預(yù)定義的常量： safe-area-inset-left, safe-area-inset-right, safe-area-inset-top 和 safe-area-inset-bottom。當(dāng)合并使用時(shí)，允許樣式使用每個(gè)方向的安全區(qū)域的大小。
CSS 工作組 最近決定添加這個(gè)特性，但是使用了不同的名稱，請(qǐng)記住這一點(diǎn)。
constant() 功能類似于 var()，比如下面的示例，在 padding 屬性使用：
.post { padding: 12px; padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right);}對(duì)于不支持 constant() 的瀏覽器，包含 constant() 的樣式將被忽略。因此，重要的是要對(duì)使用 constant() 的樣式另外使用替代樣式。
注意安全區(qū)內(nèi)嵌，使重要內(nèi)容可見。
使用 min() 和 max() 將其全部組合在一起
本節(jié)介紹目前 iOS 11 還
沒有實(shí)現(xiàn)的特性。
如果在網(wǎng)站設(shè)計(jì)中采用 constant() 來設(shè)置安全區(qū)域，你可能會(huì)注意到，在設(shè)置安全區(qū)域時(shí)，很難指定最小的 padding。在上面的頁面中，我們把 12 px 的左填充替換成 constant(safe-area-inset-left)，當(dāng)回到豎屏?xí)r，左側(cè)的安全區(qū)域變成了 0 px，文本立即緊靠屏幕邊緣。
安全區(qū)域內(nèi)嵌不能替代邊距。
要解決這個(gè)問題，我們需要指定 padding 應(yīng)該是默認(rèn)的 padding 或安全區(qū)域中較大的那個(gè)。這可以用 全新的 CSS 函數(shù) min() 和 max() 來實(shí)現(xiàn)，這將在未來的 Safari 預(yù)覽版本中提供相應(yīng)的支持。兩個(gè)函數(shù)都采用任意數(shù)量的參數(shù)，并返回最小值或最大值。它們可以在 calc() 中使用，或者嵌套在一起，這兩個(gè)函數(shù)都允許像 calc() 一樣的數(shù)學(xué)計(jì)算。
比如像下面這樣的示例，可以這樣使用 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 來檢測(cè) min 和 max 很重要，因?yàn)椴⒉皇侨魏螢g覽器都支持，根據(jù) CSS 的 無效變量處理，
不要在 @supports 查詢中指定變量。
在示例頁面中，豎屏?xí)r constant(safe-area-inset-left) 解析為 0 px，因此 max() 解析為 12 px。橫屏?xí)r，由于感應(yīng)器空間的存在，設(shè)置 constant(safe-area-inset-left) 的值會(huì)變得更大，而 max() 這個(gè)函數(shù)將會(huì)解析這個(gè)大小，以確保重要內(nèi)容始終可見。
max() 將安全區(qū)內(nèi)嵌與傳統(tǒng)邊距結(jié)合
有經(jīng)驗(yàn)的 Web 開發(fā)人員以前可能遇到過 CSS 鎖機(jī)制，通常用于將 CSS 屬性設(shè)置在特定范圍的值中。一起使用 min() 和 max() 會(huì)讓事情變得更加容易，并且將有助于在未來實(shí)現(xiàn)有效的響應(yīng)式設(shè)計(jì)。
反饋和問題
現(xiàn)在你可以在 Xcode 9 中 iPhone X 模擬器的 Safari 開始采用 viewport-fit 和安全區(qū)內(nèi)嵌。很樂意聽到所有特性被采納，請(qǐng)隨時(shí)將反饋和問題發(fā)送到 web-evangelist@apple.com或者在 Twitter 上 @webkit，并將 bug 都提交到 WebKit 的 bug 跟蹤器。
掘金翻譯計(jì)劃 是一個(gè)翻譯優(yōu)質(zhì)互聯(lián)網(wǎng)技術(shù)文章的社區(qū)，文章來源為 掘金 上的英文分享文章。內(nèi)容覆蓋 Android、iOS、React、前端、后端、產(chǎn)品、設(shè)計(jì) 等領(lǐng)域，想要查看更多優(yōu)質(zhì)譯文請(qǐng)持續(xù)關(guān)注 掘金翻譯計(jì)劃、官方微博、本站專欄。
在線咨詢
