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

Bobby Tung
Sep 16, 2017 · 6 min read

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

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

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

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

預設模式

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

使用Viewport-fit=cover

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

Image for post
Image for post

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

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

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

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

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

Image for post
Image for post
Source: http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

像這張圖裡,右上方的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還是其他)。

來計算出所佔空間。

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

.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);
}

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

Image for post
Image for post

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

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

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

Bobby Tung

Written by

W3C i18n invited expert, editor of "Requirements for Chinese Text Layout" (CLREQ), Evangelist. I provide consultancy of digital publishing in Taiwan.

Bobby Tung

Written by

W3C i18n invited expert, editor of "Requirements for Chinese Text Layout" (CLREQ), Evangelist. I provide consultancy of digital publishing in Taiwan.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store