【问题标题】：Cant get mediaqueries to work because of document width由于文档宽度，无法让媒体查询工作
【发布时间】：2023-03-27 16:35:01
【问题描述】：
我正在创建一个响应式站点，但我不明白为什么我的文档宽度是 980 像素，即使我使用的是响应大小为 428x807 的勇敢检查器工具。如果我这样设置媒体查询：
@media only screen and (max-width: 576px) {
h4 {
color:blue;
}
}
这不是说如果屏幕小于 576px 它应该是蓝色的吗？为什么inspector和文档的实际大小不一样？
【问题讨论】：
标签：
html
css
responsive-design
【解决方案1】：
有一个特殊的 mate 标签可以强制浏览器，尤其是移动浏览器，真实地了解它们的视口宽度。这个标签是
<meta name="viewport" content="width=device-width, initial-scale=1.0">
并且应该包含在文档的开头。从历史上看，移动设备会假装具有桌面尺寸，因为当移动设备首次普及时，网站根本不会以如此小的屏幕尺寸呈现。我们在这里谈论的是黑莓时代，在移动设备上渲染一个极度缩小的网站被认为更合适，这样您就可以根据需要放大，至少可以看到所有预期的内容。我希望这是你的问题，否则我想不出另一种解释。