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

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

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

　　對(duì)于跟小編一樣的“強(qiáng)迫癥”來說，看到這樣的畫面，真的有點(diǎn)抓狂……

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

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

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

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

▲最終優(yōu)化版

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

　　豎屏對(duì)比效果：

▲優(yōu)化前

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

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

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