北京時間 9 月 13 日凌晨，蘋果正式發佈瞭 iPhone 的十周年紀念產品 iPhone X，蘋果將其稱作 " 智能手機的未來 "。iPhone X 采用 5.8 英寸 OLED 異形全面屏，由於要增加 Face ID 和前置攝像頭等模塊，其正面頂部采用瞭 " 劉海 " 的設計。
iPhone X 一經發佈，關於這段 " 劉海 " 的討論就沒有停止過。而更重要的是，這樣的設計讓大部分的應用程序都有點水土不服。蘋果此前已經向開發者公佈瞭 UI 適配的註意事項，強調不能隱藏設備屏幕的圓角部分，同時也不許在頂部設置黑色欄隱藏傳感器遮蔽區域。
對於跟小編一樣的 " 強迫癥 " 來說，看到這樣的畫面，真的有點抓狂 ……
不過日前 Safari 網頁瀏覽器引擎 WebKit 的團隊在博客上詳細介紹瞭 iPhone X 的網頁優化方法。簡單來說，就是將網頁內容移動到沒有 " 劉海 " 的那一側，屏幕頂部 " 劉海 " 兩側的區域不顯示網頁內容。
文檔中提到瞭在網頁的 meta 中使用 viewport-fit=cover，這樣的話網頁不會拉伸至整個屏幕，讓顯示屏看起來很怪。
調整完 viewport 之後，就可以利用 iPhone X 安全區域進行網頁設計。在安全區域內，網頁內容不會受到劉海、圓角等問題的影響。
不過對於設計師來說，還是有點尷尬，好不容易實現的全面屏，這樣一來又相當於加上瞭無形的邊框，讓用戶的視覺體驗大打折扣。
▲最終優化版
雖然優化後的最終版本視覺效果要好上不少，但是依然有點崩潰 ……
豎屏對比效果：
▲優化前
▲最終優化效果
詳細設計指導 >>傳送門
