面對iPhone X，Web設計師需要知道的幾個CSS屬性
前幾天看到幾位做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上了。
總之，想要使用iPhone X的全螢幕顯示網頁內容的話，就將viewport設定為：
<meta name="viewport" content="viewport-fit=cover">這樣就可以使用到螢幕的所有空間。
以safe-area-inset-*確保安全邊界
但是直接使用會有問題，例如橫持時畫面右側會被那一塊感應器（瀏海）給擋住，而Home Bar等空間由於保留給系統使用，連接也會失效，會造成使用者體驗不良的狀況。案例如下：
像這張圖裡，右上方的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);
}就可以修正全螢幕時內容與系統保留區重疊的問題，就上例來說，可改善為：
同時可以處理Safa Area造成的設計不一致問題，也可以確保使用者體驗。
Constant()與safe-area-inset則還在提案階段。
如果你覺得這篇文章不錯，請到原出處給作者👏：
iPhone X の Safari における Web コンテンツの表示
