今天，Safari 網(wǎng)頁(yè)瀏覽器引擎 WebKit 的團(tuán)隊(duì)在博客上詳細(xì)講述了設(shè)計(jì)師應(yīng)該如何為 iPhone X 優(yōu)化自己的網(wǎng)站。iPhone X 頂部有“劉海”，這里包含了很多傳感器。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)人員和開(kāi)發(fā)人員來(lái)說(shuō)，這意味著新的挑戰(zhàn)。

蘋(píng)果嘗試將網(wǎng)頁(yè)內(nèi)容移動(dòng)至沒(méi)有“劉�！钡哪且粶y(cè)解決這個(gè)問(wèn)題。不過(guò)對(duì)于全屏設(shè)計(jì)的網(wǎng)頁(yè)來(lái)說(shuō)，這個(gè)解決方案可能并不夠好。文檔中提到了在網(wǎng)頁(yè)的 meta 中使用 viewport-fit=cover，這樣的話(huà)網(wǎng)頁(yè)不會(huì)拉伸至整個(gè)屏幕，讓顯示屏看起來(lái)很怪。

當(dāng) viewport 調(diào)整之后，下一步就是要利用 iPhone X 安全區(qū)域進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。在安全區(qū)域下，網(wǎng)頁(yè)內(nèi)容不會(huì)受到劉海、底部 Home 指示器以及圓角的影響。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，iPhone X 這樣的設(shè)計(jì)比較尷尬，因?yàn)閯倓傄瞥�了邊框，又加入了無(wú)形的邊框，讓整體屏幕受到了影響。點(diǎn)擊這里查看設(shè)計(jì)指導(dǎo)。