面對 iPhone X,Web 設計師需要知道的幾個 CSS 屬性

4,393 阅读3分钟
原文链接: medium.com

前幾天看到幾位做Web Design的朋友在研究iPhone X,網上已經有些不錯的文章,像是:

但似乎沒翻譯成中文還是有點接受上的問題,狗尾續貂借用內容來寫份中文版。

首先,iPhone X螢幕的四方有專為iOS使用的區域,上方有著顯示時間以及無線訊號的Status Bar,下方有供iPhone X解鎖、跳出App所使用的Home Bar,除去這兩塊後,可供App使用的區域稱為Safe Area。

考量到Safe Area,一般網頁內容會採預設模式顯示:

預設模式

Source: medium.com/%40onopko/i…

預設模式在直持(Portrait)時上下、橫持(Landscape)時左右會留下邊界,藍色區域為網頁內容顯示的區域。網址列等隱藏的行為與過去相同,但問題在於白色區域不受網頁內容所影響,也就是假設你的網頁有背景色,不會更改到白色區域的顏色,視覺上就顯得不好看。

使用Viewport-fit=cover

還蠻有趣的,Apple居然用上的CSS Round Display中所提出的@viewport新值viewport-fit。CSS Round Display這份規範是三年前在W3C TPAC會議上由LG的工程師率先提出構想,兩年前正式成案。主要是想到智慧型手錶的圓形螢幕上呈現網頁內容所需,沒想到被Apple率先用在iPhone X上了。

總之,想要使用iPhone X的全螢幕顯示網頁內容的話,就將viewport設定為:

<meta name="viewport" content="viewport-fit=cover">

這樣就可以使用到螢幕的所有空間。

Source: medium.com/%40onopko/i…

以safe-area-inset-*確保安全邊界

但是直接使用會有問題,例如橫持時畫面右側會被那一塊感應器(瀏海)給擋住,而Home Bar等空間由於保留給系統使用,連接也會失效,會造成使用者體驗不良的狀況。案例如下:

Source: stephenradford.me/removing-th…

像這張圖裡,右上方的Menu因為使用系統佔用的空間,所以無法點擊,而LinkedIn的Icon也會被瀏海擋住,有點不大行,為處理這問題,Apple提供了幾個CSS Properties來處理。

constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)

這幾個值能夠自動判定:

  • 裝置為直持還是橫持;
  • 為全螢幕顯示還是一般顯示;
  • iPhone的機種(iPhone X還是其他)。

來計算出所佔空間。

Source: medium.com/%40onopko/i…

所以只要讓網頁內容以以下語法包覆:

.container {
    padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
}

就可以修正全螢幕時內容與系統保留區重疊的問題,就上例來說,可改善為:

同時可以處理Safa Area造成的設計不一致問題,也可以確保使用者體驗。

Constan()與safe-area-inset則還在提案階段

如果你覺得這篇文章不錯,請到原出處給作者👏:
iPhone X の Safari における Web コンテンツの表示