谷歌移动可用性 > 内容超出屏幕宽度

Question

无法修复谷歌搜索控制台中的Google移动可用性错误>内容宽度超出屏幕。我尝试使用DevTools中的Chrome移动端布局模拟器，将宽度设置为320px，但没有水平滚动条出现。因此，在模拟器中所有看起来都很好，但是谷歌会引发错误。然后，我添加了以下CSS：

@media screen {
  html, body {
    width:      100%; 
    overflow-x: hidden;
  }...

但是没有效果，错误仍然存在。

测试实时URL工具没有显示任何错误，所有页面都是移动友好的。

有什么想法如何解决这个问题？我相信这是谷歌的 bug，但如何避免它呢？

- LeonidMew

Answer 1

我已经从类中移除了所有的“position: absolute”，即使绝对定位的元素在小屏幕上适配良好也无所谓。但这些类被分配给了隐藏内容，这些内容在最小的智能手机屏幕上适配得很好，而且大多数都没有与任何页面元素相关联，因为这些元素是受密码保护的。

我找到了一种更快地呈现页面的方法，不用等待长时间才能点击“请求索引”。首先创建一个新页面，使用网站模板和CSS，页面上的文本应该是唯一的（Lorem Ipsum Generator可以帮助你）。其次，创建一个只有一个URL指向新文件的网站地图文件，提交它，5分钟后你就会有爬行和索引页面。这在搜索模板或CSS中的错误时非常有帮助。

编辑： 由于删除绝对位置破坏了UI设计，我用JavaScript将其设置回来了。

- LeonidMew

Answer 2

在真实设备上进行检查，而不是模拟器。逐个删除每个部分并进行迭代检查，您将了解哪个部分导致了水平滚动。

- Creative Technocrayts

---

模拟器和硬件设备中都没有水平滚动条。只有Google搜索控制台会检测到错误。 - LeonidMew