Googlebot-mobile 看起来不像 Chrome 开发者工具设备模式答案

【问题标题】：Googlebot-mobile doesn't look like Chrome Developer Tools Device-modeGooglebot-mobile 看起来不像 Chrome 开发者工具设备模式
【发布时间】：2016-07-06 13:40:33
【问题描述】：

Google 一直抱怨我的网站不适合移动设备。以下是他们告诉我我网站上的一个随机页面在 Google Bot 移动设备上的样子：

这是同一页面在 Google Chrome 开发者工具设备模式下的外观：

我已经为我的网站实现了响应式设计，虽然它还不是 100% 完美（您可以看到内容比第二张图片中的屏幕略宽），但它确实看起来不像 Google Bot 移动版告诉我。当我在真实的移动设备上测试它时，它看起来与 Google Chrome 开发者工具设备模式完全一样。

你有什么想法吗？

以下是标题中的重要位：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
<meta name="mobile-web-app-capable" content="yes">

<link rel="stylesheet" media="all" href="/css/base.css" />
<link rel="stylesheet" media="(max-width:880px)" href="/css/dropdown.css" />
<link rel="stylesheet" media="(max-width:880px)" href="/css/mobile.css" />

mobile.css 是base.css 的“附加”，它替换了需要更改的内容，但base.css 提供了“默认值”并且始终被加载。

好像 Google Bot mobile 没有触发 mobile.css 的加载。

【问题讨论】：

很可能是因为您在基地内使用media="(max-width:880px") 而不是@media screen and max-width: 880px { }。 CSS 按顺序执行，您不需要使用多个 CSS 文件。您还应该看看为什么您的移动页面是overflowing 导致水平滚动。
刚刚尝试只使用一个文件（我创建了一个名为 all.css 的新文件以避免潜在的缓存问题）并将我所有的 CSS 放入其中，移动设备被 @media screen and (max-width: 880px){ } 包围。它在浏览器中按预期工作，但 Googlebot 仍显示桌面版本...也许我应该使用 max-width: 880px 以外的其他东西？

标签： seo googlebot mobile

【解决方案1】：

我终于设法解决了 - 原来是 Googlebot 移动版不喜欢的 min-width: auto;。

出于某种原因（当我第一次开始实施响应式设计时，为了解决平板电脑上的问题）我放了

body{
    min-width: 1510px;
}

在我的桌面 CSS 中，并用

覆盖它

body{
    min-width: auto;
}

在我的移动 CSS 中。将移动 CSS 更改为

body{
    min-width: 100%;
}

Googlebot 正确显示页面。看看我是否可以完全放弃<body> 上的最小宽度。

【讨论】：