IT之家9月23日消息 中原標準時間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安全區域進行網頁設計。在安全區域内，網頁内容不會受到劉海、圓角等問題的影響。
不過對于設計師來說，還是有點尴尬，好不容易實作的全面屏，這樣一來又相當于加上了無形的邊框，讓使用者的視覺體驗大打折扣。
▲最終優化版
雖然優化後的最終版本視覺效果要好上不少，但是依然有點崩潰……
豎屏對比效果：
▲優化前
▲最終優化效果
詳細設計指導>>傳送門