原文：Stephen Radford | ?譯：程琳琳

新的iPhone X具有美觀的全屏顯示。但是，在瀏覽器的頂端有一個(gè)小小的缺口，在默認(rèn)情況下，橫屏查看網(wǎng)站時(shí)，會(huì)出現(xiàn)橫屏顯示問題。

為了適應(yīng)iOS 11頂部缺口，默認(rèn)會(huì)將網(wǎng)站限制在屏幕上的“安全區(qū)域”內(nèi)。使得瀏覽大多數(shù)網(wǎng)站時(shí)，出現(xiàn)左右側(cè)出現(xiàn)白邊。

慶幸的是有兩個(gè)簡單的解決思路。

一、背景色（background-color）

如果您的網(wǎng)站使用單一純色作為背景，那么最適合您的解決方案就是用background-color在您的body代碼上設(shè)置屬性。上面的網(wǎng)站案例，就會(huì)得出以下結(jié)果：

正如上圖所示：邊距保持不變，只填充背景顏色

viewport-fit

如果您更喜歡對(duì)設(shè)計(jì)進(jìn)行額外的控制，或者使用漸變或圖像作為背景，則只設(shè)置一個(gè) background-color可能還不可行。在最新版本的iOS中，Apple已經(jīng)在CSS Round Display Spec中添加了viewport-fit的描述符。

只需添加viewport-fit=cover到您的meta標(biāo)記，即可將您的網(wǎng)站擴(kuò)大到填補(bǔ)整個(gè)屏幕，而不僅僅是安全區(qū)域。

這樣使得上面的網(wǎng)站案例，得出以下結(jié)果：

顯然，現(xiàn)在需要開發(fā)人員/設(shè)計(jì)師手動(dòng)調(diào)整來適應(yīng)屏幕的缺口。

safe-area-inset-*

為了處理可能需要的任何調(diào)整，iOS 11的Safari版本包含一些可以在使用時(shí)viewport-fit=cover使用的常量。

safe-area-inset-top

safe-area-inset-right

safe-area-inset-left

safe-area-inset-bottom

這可以被添加到margin，padding或諸如top、left一樣的絕對(duì)位置值。我將以下內(nèi)容添加到網(wǎng)站的主要容器中。

這完美解決了頁面上菜單和社交媒體圖標(biāo)位置問題。