為iPhone X設(shè)計(jì)網(wǎng)站
時(shí)間：2023-05-16 13:33:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-05-16 13:33:01 來源：網(wǎng)站運(yùn)營
為iPhone X設(shè)計(jì)網(wǎng)站：原文閱讀
在擁有全面屏的新iPhone X上，不需要任何設(shè)置，Safari就可以完美地顯示你現(xiàn)有的網(wǎng)站。內(nèi)容自動(dòng)嵌入在屏幕的安全區(qū)域內(nèi)，因此既不會(huì)被圓角遮擋，也不會(huì)被設(shè)備的傳感器的外殼擋住。
內(nèi)嵌的區(qū)域用頁面的background-color（如 <body>或<html> 元素）來填充，用來與頁面的其他部分融為一體。對(duì)于很多網(wǎng)站來說，這就足夠了。如果你的頁面背景是純色，頁面上只有文本和圖片，默認(rèn)的內(nèi)嵌方式將會(huì)看起來很贊。
其他頁面——尤其是那些設(shè)計(jì)成橫向全屏導(dǎo)航欄的頁面，像以下頁面——可以選擇深入研究并充分利用新屏幕的這些特征。iPhone X 人機(jī)交互指南詳述了一些需要銘記在心的通用的設(shè)計(jì)原則，UIKit文檔也討論了原生app可以采用什么具體機(jī)制來保證它們看起來很好。你的網(wǎng)站可以使用在iOS 11里介紹的新增的一些相似的WebKit API ，來充分利用這種無邊框設(shè)計(jì)特性的屏幕。
Safari默認(rèn)的嵌入的行為
利用整塊屏幕
第一個(gè)新特性是viewport-fit，對(duì)現(xiàn)有的viewpoint meta標(biāo)簽進(jìn)行了擴(kuò)充,可以控制內(nèi)容嵌入的方式。viewport-fit在iOS 11可以使用。
viewport-fit的默認(rèn)值是auto,這個(gè)值導(dǎo)致自動(dòng)嵌入內(nèi)容的效果，如上所示。為了禁用這個(gè)行為，并且使得頁面展示成全屏效果，你可以把viewport-fit設(shè)置成cover。設(shè)置完這些后，我們的viewport meta標(biāo)簽現(xiàn)在看起來像這樣：
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>重新加載后，導(dǎo)航欄看起來好很多了，拉通顯示了。然而，為什么考慮系統(tǒng)的安全區(qū)域部分很重要立馬就清楚了：一些頁面內(nèi)容被設(shè)備的傳感器的外殼遮擋住了，而且底部的導(dǎo)航欄也很難用。
用viewport-fit=cover來填充整個(gè)屏幕
考慮安全區(qū)域
在使用viewport-fit=cover后，為了使我們的頁面再次可用，下一步是選擇給包含重要內(nèi)容的元素設(shè)置內(nèi)邊距，確保他們不被屏幕的形狀遮擋。這將導(dǎo)致頁面在iPhoneX上充分利用新增屏幕固定區(qū)域的優(yōu)點(diǎn)，在動(dòng)態(tài)調(diào)整的過程中來避開邊角、傳感器外殼和訪問主屏幕的指示按鈕。
在 iPhone X 的水平方向上的安全和不安全的區(qū)域，用 inset constants表示。
為了實(shí)現(xiàn)上述效果，iOS 11 的webki增加了一個(gè)新的CSS方法，constant()，和一套四個(gè)預(yù)定義的常量：safe-area-inset-left、safe-area-inset-right、 safe-area-inset-top、 以及safe-area-inset-bottom。當(dāng)組合使用時(shí)，這些屬性允許參照每一邊安全區(qū)域的當(dāng)前尺寸來進(jìn)行樣式聲明。
CSS工作組最近完成了增加這個(gè)特征值，但是用了別的名字。用的時(shí)候請(qǐng)記住。
var()在哪里使用，constant()就在哪里使用--例如，在padding屬性里：
.post { padding: 12px; padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right);}對(duì)于不支持constant()的瀏覽器，包含它的樣式規(guī)則將會(huì)被忽略；因此，對(duì)于任何使用constant()聲明仍然需要單獨(dú)指定回退方案，這很重要。
為了重要內(nèi)容可見，考慮安全區(qū)域。
綜合以上情況,用min()和max()
這一部分涉及當(dāng)前ios11并不包含的特性。
如果你在網(wǎng)站設(shè)計(jì)中采用安全區(qū)域的插入常量，你可能注意到，指定你想要在安全區(qū)域內(nèi)嵌區(qū)域外設(shè)置最小內(nèi)邊距有點(diǎn)難。在以上頁面，我們用constant(safe-area-inset-left)來替換我們的12px的左內(nèi)邊距，當(dāng)我們旋轉(zhuǎn)到豎屏，左邊安全區(qū)域inset變成了0px,并且文本立馬就緊貼著屏幕邊框了。
安全區(qū)域insets不是外邊距的替代品。
為了解決這個(gè)問題，我們想指定的我們的內(nèi)邊距應(yīng)該是默認(rèn)的內(nèi)邊距或是安全區(qū)域距離,這樣更好。這可以用全新的CSS 方法min() 和max()來實(shí)現(xiàn),這個(gè)將在未來Safari Technology Preview發(fā)布后可以用。這個(gè)兩個(gè)方法以任意數(shù)字為入?yún)ⅲ祷刈钚≈祷蜃畲笾?。可以在calc()內(nèi)使用，或是彼此嵌套，這兩個(gè)方法循序calc()-像他們內(nèi)部的數(shù)學(xué)運(yùn)算。
在這種情況下，我們想用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很重要，因?yàn)檫@兩個(gè)屬性并不是哪里都支持的，由于CSS對(duì)待非法變量的規(guī)則，不要在你的@supports查詢里指明一個(gè)變量。
在我們的示例頁面里，豎屏方向，constant(safe-area-inset-left)變成了0px,因此，max()方法變成12px。在橫屏模式，當(dāng)constant(safe-area-inset-left)由于傳感器外殼變得更大時(shí)，相反，max()方法決定了那個(gè)尺寸，保證里面的重要內(nèi)容總是可見的。
使用max()來把安全區(qū)域距離和傳統(tǒng)的外邊距結(jié)合起來。
有經(jīng)驗(yàn)的web開發(fā)者可能以前遇到過“CSS鎖”的機(jī)制，通常用來把CSS屬性限制在一個(gè)特定范圍的值內(nèi)。結(jié)合使用min()和max() 讓處理這種情況更容易，在將來的實(shí)現(xiàn)有效的響應(yīng)式設(shè)計(jì)里將會(huì)非常有用。
反饋和問題
今天，你可以開始使用viewport-fit和安全區(qū)域距離了，通過在iPhoneX模擬器上使用Safari，結(jié)合Xcode 9。我們很樂意聽到你用所有的這些特性的使用情況，所以，請(qǐng)隨意點(diǎn)，給web-evangelist@apple.com發(fā)送反饋，或是在Twitter上@webkit，并在WebKit bug追蹤提出任意你遇到的bug。
在線咨詢
