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

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

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

之前的 iPhone 布局

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

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

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

白条 iPhone

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

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

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

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

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

iPhone 之后

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

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

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

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

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

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

Astra 自定义布局激活

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

添加新的 Astra 自定义布局

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

WordPress 启用代码编辑器

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

添加视口元标记

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

  • 布局:挂钩
  • 操作:wp_head
  • 显示于:整个网站
布局设置挂钩

发布布局。

2. 使用 Astra Hooks 插件

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

插件激活后,请按照以下步骤操作:

安装 Astra Hooks 插件

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

在定制器中,转到Hooks > Header

Astra 钩头

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

将代码添加到 WordPress 标头

就这样!

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

© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容