新款 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 的全屏幕显示也会非常漂亮。
