如何解决“内容比屏幕宽”错误 ?

发布时间:2021-04-12 15:54:58 阅读:24
谷歌搜索控制台可能会警告你各种移动可用性错误。除了 "可点击元素太接近" 之外,你的总结报告还可以包括 "内容大于屏幕" 问题。此问题将与 "可点击元素" 错误显示在 Google 搜索控制台中的同一位置。同样,它也有各种潜在原因。

为什么 "内容比屏幕宽" 错误可能会出现

当你的网站设计水平扩展时,就会出现此错误,迫使移动用户侧身轻扫以查看 "屏幕外" 内容。自提供良好的用户体验,应尽可能避免水平滚动。

如果你在 CSS 声明中使用绝对值,则更有可能遇到 "内容大于屏幕" 的问题。由于不灵活的布局可能导致 "可点击元素" 错误,因此在同一移动可用性报告中遇到这两个错误并不罕见。

如何修复 "内容比屏幕宽" 错误(5 种方法)

如果你的报告包含 "内容大于屏幕" 错误,你可以使用一些简单的方法来解决它。让我们来看看五个最常见的选项。

1. 避免在 CSS 声明中使用绝对变量

修复 "内容大于屏幕" 错误的最佳方法之一是避免在 CSS 声明中使用绝对变量。你的内容不应要求特定视场正确显示和运行。

因此,你不应使用绝对值,而应选择相对宽度和位置值为你的 CSS 元素。尽可能使用相对值,你可以创建灵活的布局,以适应一系列屏幕尺寸。

2. 分配图像的最大宽度

具有固定尺寸的图像可能显示大于视场,进而触发 "内容大于屏幕" 错误。为了确保你的图像基于屏幕的尺寸进行缩放,最好将所有图像的最大宽度分配为 100%.

它将迫使图像收缩以适应可用空间。即使你使用 max-width,你仍然应该在标签中使用宽度和高度属性,因为现代的 web 浏览器使用这些信息来为加载图像预留空间。使用标签,当你的图像最终出现在屏幕上时,你可以避免布局移位。

3. 使用元视图标签

默认情况下,移动浏览器将页面呈现在桌面屏幕宽度(通常约为 980px)。然后,浏览器将尝试通过增加字体大小和缩放内容以适应当前屏幕尺寸来优化页面。

不幸的是,这种默认行为可能导致不一致。有些用户可能需要放大才能阅读和与你的内容交互,这就是为什么你可能会看到此错误的原因。

你不应依赖此默认行为,而应向浏览器提供有关如何控制页面尺寸和刻度的说明。你可以做到这一点插入元视图端口标签到你的文件的头部。

4. 使用现代 CSS 布局技术

你还可以通过切换网站布局来修复 "内容大于屏幕" 的错误。帮助你创建更灵活的布局,你可能需要考虑实施技术,如弹性盒、CSS 网格布局或多列布局。

5. 酌情使用 CSS 媒体查询

媒体查询可以更容易地根据用户设备(包括触摸屏)更改样式。因此,如果你此时仍在处理 "内容大于屏幕" 错误,我们建议在适当的时候使用 CSS 媒体查询。

进行这些更改后,需要进行测试,看看你是否成功解决了 "内容大于屏幕" 的错误。你可以通过重新运行移动可用性报告和使用我们在下一节中讨论的步骤验证修复程序来做到这一点。

如何验证和验证你的错误解决方法

无论你正在处理哪些上述错误,也无论你使用哪些方法来修复这些错误,确定你的更改是否解决了问题至关重要。你可以通过重新运行 Google 的移动可用性测试来做到这一点。

要做到这一点,导航回你的移动可用性报告并定位 "可点击元素太接近在一起" 错误。接下来,选择 验证修复选项。

请注意,如果你尝试验证和验证错误分辨率为 "内容大于屏幕",则可以重复这些相同的步骤。然后,Google 将抓取你的网站,你将收到一条消息,让你知道它正在验证更改。

如果你已经解决了错误,那么谷歌搜索控制台将显示一条 "已通过" 的消息和一个附带的绿色复选标记。另一方面,如果你使用的修复程序未得到验证,则必须重新检查错误以实现替代解决方案。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"如何解决“内容比屏幕宽”错误 ?",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560