Seo 谷歌机器人手机没有'；看起来不像Chrome开发者工具设备模式

谷歌一直抱怨我的网站对手机不友好。以下是他们告诉我的，我的网站上的一个随机页面在Google Bot mobile上看起来像：

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

我已经为我的网站实现了一个响应性设计，尽管它还不是100%完美（正如你在第二张图片中看到的内容比屏幕稍宽），但它看起来确实不像谷歌机器人手机告诉我的那样。当我在一个真正的移动设备上测试它时，它看起来和谷歌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

我终于设法解决了它——结果是一个

minwidth:auto
出于某种原因（为了解决我刚开始实施响应式设计时平板电脑上的一个问题），我把

body{
    min-width: 1510px;
}

在我的桌面CSS中，并用

body{
    min-width: auto;
}

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

body{
    min-width: 100%;
}

Googlebot正确显示页面。将查看我是否可以安全地将最小宽度全部丢弃在
上。
很可能是因为您使用
media=“（max width:880px”）
而不使用
@media screen和max width:880px{}
。CSS按顺序运行，您不需要使用多个CSS文件。你还应该看看为什么你在手机中的页面溢出了
，导致了水平滚动。只是试着只使用一个文件（我制作了一个名为
all.css
的新文件，以避免潜在的缓存问题）并将我所有的css放在其中，手机内容被
@媒体屏幕和（最大宽度：880px）{}
包围。它在浏览器中正常工作，但谷歌机器人仍显示桌面版本。。。也许我应该使用的不是
最大宽度：880px
？