iPhone X網(wǎng)頁瀏覽效果公布：強迫癥崩潰

　　蘋果發(fā)布的iPhone的十周年紀(jì)念產(chǎn)品iPhone X，蘋果稱其“智能手機的未來”。這也是蘋果首款全面屏手機，不過這個全面屏手機有一個尷尬的齊劉海設(shè)計，雖然里面的功能很強大，但是這個齊劉海對于屏幕的使用來說相當(dāng)尷尬。

　　iPhone X一經(jīng)發(fā)布，關(guān)于這段“劉海”的討論就沒有停止過。而更重要的是，這樣的設(shè)計讓大部分的應(yīng)用程序都有點水土不服。蘋果此前已經(jīng)向開發(fā)者公布了UI適配的注意事項，強調(diào)不能隱藏設(shè)備屏幕的圓角部分，同時也不許在頂部設(shè)置黑色欄隱藏傳感器遮蔽區(qū)域。

　　對于跟小編一樣的“強迫癥”來說，看到這樣的畫面，真的有點抓狂……

　　不過日前Safari網(wǎng)頁瀏覽器引擎WebKit的團隊在博客上詳細介紹了iPhone X的網(wǎng)頁優(yōu)化方法。簡單來說，就是將網(wǎng)頁內(nèi)容移動到?jīng)]有“劉海”的那一側(cè)，屏幕頂部“劉海”兩側(cè)的區(qū)域不顯示網(wǎng)頁內(nèi)容。

　　文檔中提到了在網(wǎng)頁的meta中使用viewport-fit=cover，這樣的話網(wǎng)頁不會拉伸至整個屏幕，讓顯示屏看起來很怪。

　　調(diào)整完viewport之后，就可以利用iPhone X安全區(qū)域進行網(wǎng)頁設(shè)計。在安全區(qū)域內(nèi)，網(wǎng)頁內(nèi)容不會受到劉海、圓角等問題的影響。

　　不過對于設(shè)計師來說，還是有點尷尬，好不容易實現(xiàn)的全面屏，這樣一來又相當(dāng)于加上了無形的邊框，讓用戶的視覺體驗大打折扣。

▲最終優(yōu)化版

　　雖然優(yōu)化后的最終版本視覺效果要好上不少，但是依然有點崩潰……

　　豎屏對比效果：

▲優(yōu)化前

▲最終優(yōu)化效果

　　雖然這樣優(yōu)化iPhone X的齊劉海后確實是不影響使用了，但是之后的app應(yīng)用又該怎么解決呢?

上一篇：“吃雞”太火！騰訊也要吃波雞：大逃殺…
下一篇：一件快遞來回竟差價100元：順豐回應(yīng)原…