为什么Chrome DevTools Responsive视口认为它的宽度为980px？

Question

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

我正在使用bootstrap的网格布局，所以我正在使用div.container，如左下角所示。当我将鼠标悬停在它上面时，我看到chrome的特定div标记为宽度750px（整个body为980px），即使我清楚地设置了屏幕在较小的分辨率。即使是顶部的标尺也显示它宽480像素。

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

我是否误解了如何使用响应功能？

谢谢！

Answer 1

接受回答

如评论中所述：您缺少带有视口的meta标记，媒体查询才能生效。

Answer 2

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

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