新款 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 的全屏幕显示也会非常漂亮。
暂无评论内容