在响应式设计中避免使用 Meta Viewport 标签 - Google Insights Score

【问题标题】：Avoid the Meta Viewport Tag in Responsive Design - Google Insights Score在响应式设计中避免使用 Meta Viewport 标签 - Google Insights Score
【发布时间】：2015-05-25 03:43:11
【问题描述】：

我已将我的网站设计为无需实际使用即可响应

<meta name="viewport" content="width=device-width, initial-scale=1.0">

它看起来正是我在移动设备上想要的样子。问题是，当我去 Google Insights 测试我的网站是否经过移动优化时，它说不是。当我添加元标记时，它表示我的网站已针对移动设备进行了优化（尽管它对人类来说看起来更糟糕）。

我的问题是，可以绕过使用元视口标签，同时仍然让 Google Insights 告诉我我的网站已经过移动优化，因此增加了 SEO 优势。

【问题讨论】：

标签： html css mobile responsive-design seo

【解决方案1】：

您不想将视口宽度设置为特定大小。这将使所有设备都将其视为设置的大小。

将其更改为 'device-width' 如下所示，它将调整为设备宽度。

<meta name="viewport" content="width=device-width,initial-scale=1" />

【讨论】：

这仍然把我的网站搞得一团糟。我尝试了一大堆设置，除了根本不使用它之外，没有任何效果。作为参考，我遇到问题的网站是ninjawarrior.info/revamp/lifestyle.html
我看到的第一件事可能是页面水平滚动。这可能是一个固定且太大的宽度。尝试删除所有固定的宽度。
我正在使用具有很多设置的引导程序，因此很难查明问题。我认为它与类容器有关，但我删除了所有固定宽度。由于我的页面完全符合我想要的方式，没有元视口标签，我真正想做的是能够完全不必使用它，但不会被标记为无响应。