谷歌一直在抱怨我的网站不适合移动设备。以下是他们告诉我我的网站上的随机页面看起来像Google Bot mobile:
以下是Google Chrome开发人员工具设备模式中相同页面的显示方式:
我已经为我的网站实现了响应式设计,虽然它还不是100%完美(因为你可以看到内容比第二张图片中的屏幕略宽),但它看起来肯定不像Google Bot mobile告诉我。当我在真实的移动设备上测试它时,它看起来就像谷歌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
一样。
答案 0 :(得分:1)
我终于设法解决了 - 事实证明这是Googlebot手机不喜欢的min-width: auto;
。
出于某种原因(当我第一次开始实施响应式设计时解决平板电脑上的问题)我已经放了
body{
min-width: 1510px;
}
在我的桌面CSS中,并用
覆盖了它body{
min-width: auto;
}
在我的移动CSS中。将移动CSS更改为
后body{
min-width: 100%;
}
Googlebot正确显示该页面。将看看我是否可以完全放弃<body>
上的最小宽度。