为什么 Chrome DevTools 响应式视口认为它的宽度为 980 像素？答案

【问题标题】：Why does the Chrome DevTools Responsive viewport think it's 980px wide?为什么 Chrome DevTools 响应式视口认为它的宽度为 980 像素？
【发布时间】：2016-08-04 00:07:26
【问题描述】：

我使用 Chrome DevTools 将视口的大小调整为 480 像素宽，如下所示。

我正在使用引导程序的网格布局，所以我有一个正在使用的div.container，如左下角所示。当我将鼠标悬停在它上面时，我看到 chrome 将特定的 div 标记为宽度 750px（并且整个 body 是 980px），尽管我显然将屏幕设置为较小的分辨率。即使是顶部的标尺也显示它是 480px 宽。

为了进一步确认，您可以看到媒体查询说 750 像素的宽度只能设置为更高的分辨率（最小 768 像素），因此视口假设它的宽度比实际值更大。

我是否误解了响应式功能的使用方式？

谢谢！

【问题讨论】：

视口元数据有什么价值？
那是<meta name="viewport" ..> 标签吗？我检查了<head> 并没有看到任何具有该名称的东西，所以我猜它使用了默认值？

标签： css twitter-bootstrap google-chrome responsive-design

【解决方案1】：

接受回答

如 cmets 中所述：您缺少带有视口的 meta 标记，这是媒体查询生效所必需的。

【讨论】：

@rinogo 在这里也一样。缺乏关于为什么980px min-width 生效的信息令人抓狂！感谢上帝提供 Google + StackOverflow。

【解决方案2】：

如上所述，在 html 标头中添加元标记将解决此问题。下面是 viewport 元素，它应该包含在您的所有网页中

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

【讨论】：

更多关于视口及其参数的信息在W3Schools。