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

Question

31

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

我使用了Bootstrap的网格布局，因此我有一个div.container，如左下角所示。当我将鼠标悬停在上面时，我看到Chrome将特定的div标记为宽度750px（整个body的宽度为980px），即使屏幕分辨率明显更小。即使顶部的标尺显示它的宽度为480px。

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

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

谢谢！

- user2490003

3

在视口元数据中，你有什么值？ - Justinas

那是<meta name="viewport" ..>标签吗？我检查了<head>，没有看到任何带有这个名称的东西，所以我猜它使用了默认值？ - user2490003

2个回答

33

如上所述，在html头中添加元标记将解决此问题。以下是视口元素，在所有网页中都应包含：

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

- Siva

有关视口及其参数的更多信息，请参见W3Schools。 - Ledorub

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Justinas · Accepted Answer

接受答案

如评论中所述：您缺少必需的包含视口的标签，以使媒体查询生效。