IT之家9月23日消息 北京時(shí)間9月13日凌晨，蘋果正式發(fā)布了iPhone的十周年紀(jì)念產(chǎn)品iPhone X，蘋果將其稱作“智能手機(jī)的未來”。iPhone X采用5.8英寸OLED異形全面屏，由于要增加Face ID和前置攝像頭等模塊，其正面頂部采用了“劉?！钡脑O(shè)計(jì)。
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)化效果
詳細(xì)設(shè)計(jì)指導(dǎo)>>傳送門
廣告聲明：文內(nèi)含有的對(duì)外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時(shí)間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。