Question

谷歌一直在抱怨我的网站不适合移动设备。以下是他们告诉我我的网站上的随机页面看起来像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一样。

Answer 1

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

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

body{
    min-width: 1510px;
}

在我的桌面CSS中，并用

覆盖了它

body{
    min-width: auto;
}

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

后

body{
    min-width: 100%;
}

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

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

1 个答案: