如何删除 iPhone X 及更高版本 Safari 浏览器中的白条

新款 iPhone X 拥有漂亮的无边框显示屏。但您可能会发现浏览器顶部有一个小缝隙。

当以直立（纵向）位置查看网站时，您不会注意到这个间隙。但如果您将屏幕旋转到水平（横向）位置模式，您会注意到屏幕两侧都有空白。

为了避免此类内容遮挡，iOS系统将网站显示限制在屏幕上的“安全区域”内。

在网站上，这会导致左侧和右侧出现字母框。

您可以在 Apple 官方网站上阅读有关“相对于安全区域定位内容”的更多信息。

为了避免浏览器周围出现白条，您需要扩展安全区域。为此，您需要添加自定义代码。

只需在视口元标记中添加“ viewport-fit=cover ”即可扩展您的网站以填充整个屏幕而不仅仅是安全区域。

这是您需要添加到您的网站的自定义代码 –

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

您的网站最终看起来会像这样：

如您所见，屏幕左侧和右侧的空白已被删除。

如何向您的网站添加自定义代码

有两种方法可以将此代码添加到您的网站 –

1. 使用自定义布局 (Astra Pro)

自定义布局是 Astra Pro 模块。这意味着，对于此方法，您需要安装并激活 Astra Pro 插件。请按照以下步骤使用自定义布局添加代码： 

在外观 > Astra 选项 > Astra Pro 模块中激活自定义布局模块。

导航至外观 > Astra 选项 > 自定义布局并添加新的自定义布局。

下一步，点击“启用代码编辑器”来激活它。

在代码编辑器中插入代码。

向下滚动到设置并设置以下选项：

• 布局：挂钩
• 操作：wp_head
• 显示于：整个网站

发布布局。

2. 使用 Astra Hooks 插件

如果您使用的是没有 Astra Pro 插件的唯一 Astra 主题，则可以使用Astra Hooks插件添加此代码。只需转到仪表板 > 插件 > 添加新插件，找到 Astra Hooks，安装并激活它。

插件激活后，请按照以下步骤操作：

打开您的定制器（仪表板>外观>定制）

在定制器中，转到Hooks > Header

将代码添加到wp_head部分并发布

就这样！

您的网站现在在 iPhone 的全屏幕显示也会非常漂亮。