响应式站点media queries不生效，document宽度与浏览器调试尺寸不一致

核心原因：未配置移动端视口元标签 #

移动端浏览器（包括Brave的响应式调试模式）默认会使用980px的虚拟布局视口渲染页面，再将整个页面缩放到适配当前设备屏幕尺寸，这就是你看到document宽度始终为980px、宽度小于576px的媒体查询不生效的根因。

你只需要在页面<head>标签中添加如下视口配置即可解决：

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

该配置会强制浏览器的布局视口宽度等于当前设备的实际屏幕宽度，添加后你再调试428px宽度的场景，document宽度会同步变为428px，媒体查询规则会正常触发。

其他可排查的边缘情况 #

如果添加视口标签后依然不生效，可以按以下顺序排查：

• 检查CSS规则优先级：确认你写的媒体查询规则没有被后续优先级更高的h4样式覆盖，可以打开元素检查器查看h4的样式列表，确认对应媒体查询规则是否出现、是否被划掉
• 检查CSS语法错误：确认媒体查询的括号、大括号没有漏写，其余CSS规则没有语法错误导致后续规则不生效
• 清除浏览器缓存重新加载，避免旧的CSS文件被缓存未更新

内容的提问来源于stack exchange，提问作者toby044