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

Google不断抱怨我的网站不适合移动设备。以下就是他们告诉我，在我的网站随机页面看起来像谷歌机器人手机：Googlebot-mobile看起来不像Chrome开发者工具设备模式

而这里的同一个页面的外观在谷歌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提供了“默认值”，并总是加载。

就好像谷歌机器人手机没有触发加载mobile.css。

来源

2016-03-19 BadCash

很可能是因为您在使用'media =“（max-width：880px”）'而没有在您的底座中使用@media screen和max-width：880px {}'。 CSS依次排列，你不需要使用多个CSS文件。你也应该看看为什么你的手机页面是“溢出”导致水平滚动。 –

刚刚尝试过只使用一个文件（我做了一个叫'all.css'的新文件，以避免潜在的缓存问题），并将所有的CSS放在里面，用'@media screen和（max-width： 880px）{}'。它在浏览器中按预期工作，但Googlebot仍显示桌面版本......也许我应该使用'max-width：880px'以外的其他内容？ – BadCash

我终于设法解决它 - 事实证明，这是Googlebot手机不喜欢的min-width: auto;。

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

body{ 
    min-width: 1510px; 
}

在我的桌面CSS，并覆盖与

body{ 
    min-width: auto; 
}

在我的手机CSS。将手机CSS更改为

body{ 
    min-width: 100%; 
}

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

来源

2016-03-20 12:40:21 BadCash

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

回答

相关问题