使 960 像素宽的网站适合移动设备答案

【问题标题】：Making a 960px wide site mobile friendly使 960 像素宽的网站适合移动设备
【发布时间】：2015-05-12 08:49:01
【问题描述】：

我正在更新一个网站，使其符合 Google 移动友好性要求。该网站已设计为 960 像素的固定宽度，因此如果我将视口设置为 width=960, initial-scale=1 然后Mobile Friendly Checker extension 报告以下问题：

得分：61

如果我将视口设置为width=device-width, initial-scale=1，那么网站会在视口之外流动，我会收到以下错误：

得分：64

为了让 Google 验证是否适合移动设备，我需要走width=device-width, initial-scale=1 路线并相应地更新样式吗？还有其他解决方法吗？

【问题讨论】：

我几乎从未见过可以在智能手机上运行良好的桌面网站，因此我建议您使其具有响应性。也许您想阅读来自 Google-Devlopers 的这篇文章：developers.google.com/web/fundamentals/getting-started/?hl=en
我们认为我们可以在重新设计网站以使其响应之前实施临时修复。
那我会选择width=960, initial-scale=1，这样您就可以看到所有内容并尽快重建网站
width=960, initial-scale=1 的问题是它没有通过测试。
是的，但目前它是最好的选择。如果您的网站不适合移动设备，您想做什么？最佳选择：重建它。与此同时？为您的移动用户创造最佳体验。这种体验可能不是很好，但它是目前最好的。

【解决方案1】：

如果您试图欺骗 Google 以提高您的排名，那么您应该准备好为此受到 Google 的“惩罚”。这将很快变得与反向链接问题相同，即网站由于不可靠的做法而完全退出排名。所以，不要这样做！

也许您的临时修复应该包括向您的 css 添加新类以重塑 [/hack] 视口区域之外的内容，例如

@media (max-width: 767px) {
   .rightsidebar {float: none; clear: left;}
}

【讨论】：