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

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

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