Css 为什么Chrome DevTools Responsive视口认为它是'；980px宽？

我使用Chrome开发工具将视口的大小调整为480px宽，如下所示

我使用的是bootstrap的网格布局，因此我使用了一个

div.container

，如左下角所示。当我将鼠标悬停在chrome上时，我看到chrome上有一个特别的

div

标记为width

750px

（整个

body

是

980px

），尽管我明显地将屏幕设置为较小的分辨率。甚至顶部的标尺也显示它的宽度为480px

为了进一步确认，您可以看到媒体查询，该查询表示750px的宽度应仅设置为更高的分辨率（最小768px），因此视口假定其宽度比实际宽度高

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

谢谢

用于接受答案

---

如评论中所述：您缺少媒体查询生效所需的带有视口的

meta

标记。

如上所述，在html标题中添加metatag将解决此问题。 下面是视口元素，它应该包含在所有网页中

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

视口的元数据中有什么值？这是

标记吗？我检查了

，没有看到任何与该名称相关的内容，所以我猜它使用了默认值？@rinogo这里也一样。缺乏关于980px最小宽度为何生效的信息令人恼火！感谢上帝，谷歌+StackOverflow。