Google 移动可用性 > 内容比屏幕更宽答案

【问题标题】：Google Mobile Usability > Content wider than screenGoogle 移动可用性 > 内容比屏幕更宽
【发布时间】：2018-09-20 05:37:26
【问题描述】：

无法修复错误 Google 移动可用性 > 内容比 Google Search Console 中的屏幕宽。我尝试了 DevTools 的 chrome 移动布局模拟器，将宽度设置为 320px，但没有出现水平滚动。所以，在模拟器中一切看起来都很好，但谷歌引发了错误。然后，我添加到 css：

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

但是没有效果，错误依旧存在。

测试实时 URL 工具不显示任何错误，所有页面都适合移动设备。

知道如何解决这个问题吗？我确定这是谷歌错误，但如何避免呢？

【问题讨论】：

标签： css mobile-website google-search-console

【解决方案1】：

我已经从类中删除了所有“位置：绝对”，如果绝对元素适合小屏幕也没关系。但是这些类被分配给适合最小智能手机屏幕的隐藏内容，而且它们中的大多数都没有连接到任何页面元素，因为元素受密码保护。

我找到了一种更快呈现页面的方法，在单击“请求索引”后无需等待很长时间。首先创建新页面，使用站点模板和 css，页面上的文本应该是唯一的（Lorem Ipsum Generator 帮助）。其次，再创建一个站点地图文件，其中只有一个指向新文件的 url，提交它，在 5 分钟内您将抓取并索引页面。这对在模板或 css 中搜索错误很有帮助。

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

【讨论】：

【解决方案2】：

签入真实设备而不是模拟器。删除每一节，反复检查，你就会明白是哪一节导致了水平滚动

【讨论】：

模拟器和硬件设备都没有水平滚动。只有谷歌搜索控制台检测到错误。