为啥 Chrome DevTools 响应式视口认为它的宽度为 980 像素？
Posted
技术标签:
【中文标题】为啥 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> 并没有看到任何具有该名称的东西，所以我猜它使用了默认值？
【参考方案1】：
接受回答
如 cmets 中所述：您缺少带有视口的 meta 标记，这是媒体查询生效所必需的。
【讨论】：
@rinogo 在这里也一样。缺乏关于为什么980px min-width 生效的信息令人抓狂！感谢上帝提供 Google + ***。【参考方案2】：
如上所述，在 html 标头中添加元标记将解决此问题。 下面是 viewport 元素，它应该包含在您的所有网页中
<meta name="viewport" content="width=device-width, initial-scale=1.0">
【讨论】：
更多关于视口及其参数的信息在W3Schools。以上是关于为啥 Chrome DevTools 响应式视口认为它的宽度为 980 像素？的主要内容，如果未能解决你的问题，请参考以下文章
为啥vue-devtools chrome插件安装完成了，但是控制台没有显示出来