iPhoneX瀏覽網頁效果圖公布，強迫症看了想打人

中關村在線消息：蘋果iPhoneX將在10月27日開啟預約，11月4日正式發售。我們都已經知道了iPhoneX上奇怪的劉海設計，更另開發者苦惱的是，蘋果向開發者公布了UI適配的注意事項，強調了不能隱藏設備屏幕的圓角部分，同時也不允許設計頂部黑色狀態欄來隱藏劉海。

所以這項政策給開發者帶來了巨大的麻煩。好在日前Safari瀏覽器的引擎WebKit團隊為我們詳細介紹了該如何為iPhoneX優化UI設計。

令人崩潰的UI設計

WebKit團隊以Safari為例，簡單的說就是將網頁內容移動到設備中間沒有劉海的區域，但在有劉海的區域同樣不能空白。就像上麵這樣，但也不能被劉海遮住，就像下麵這樣。

劉海遮住了網頁內容

利用viewport調整安全區域，就可以利用iPhoneX在安全區域內進行網頁設計了，而在這個安全區域內，網頁上的內容不會被劉海，圓角遮住。

安全區域

在安全區域內設計完後，要將兩側的空白區域填充上相適配的顏色，最終效果就是這樣。

橫屏最終效果

豎屏最終效果

最終的效果看起來就好很多，但這隻是網頁部分的設計，還有更多的APP等著開發者重新設計，相信在11月份蘋果iPhoneX上市以後，就已經有不少APP都做好了適配。

最後更新：2017-10-08 20:41:00