代码之家 › 专栏 › 技术社区 › user2490003

为什么Chrome DevTools Responsive视口认为它是980px宽?

responsive-design google-chrome twitter-bootstrap css

user2490003 · 技术社区 · 9 年前

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

我正在使用引导程序的网格布局,所以我有一个 div.container 如左下角所示。当我将鼠标悬停在它上面时,我看到chrome有这种特殊的功能 div 标记为宽度 750px (以及整个 body 是 980px ),尽管我的屏幕分辨率明显较低。即使是顶部的标尺也显示它是480px宽。

为了进一步确认,您可以看到媒体查询,其中指出750像素的宽度只能设置为更高的分辨率(最小768像素),因此视口假设它的宽度比实际的更高。

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

谢谢

2 回复 | 直到 9 年前

Justinas 9 年前

用于接受回答

如评论中所述:你失踪了 meta 带有视口的标记,这是媒体查询生效所需的。

Siva 7 年前

如上所述,在html头中添加metatag将解决问题。下面是viewport元素,它应该包含在所有网页中

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

Mass · 如何在Tailwind CSS v4中创建配置

4 月前

magenta placenta · 将css变量合并为一个变量

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前