Chrome DevTools屏幕尺寸显示异常？媒体查询无法正常生效

• 未添加viewport元标签
  移动端浏览器默认会以桌面端宽度（通常为980px）渲染页面再缩放显示，这就导致DevTools显示375px时，实际视口宽度仍为980px左右，你的@media (max-width:375px)自然不会触发。
  解决：在HTML的<head>中加入以下代码：

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

  该标签会让浏览器将设备实际宽度作为视口宽度，同时设置初始缩放比例为1，使DevTools显示的尺寸与实际视口匹配。

• DevTools缩放设置异常
  检查设备工具栏右上角的缩放选项，若开启了自动缩放或缩放比例不是100%，页面会被拉伸，导致实际视口宽度偏离设置值。手动将缩放调至100%，或关闭自动缩放功能即可。

• CSS样式优先级冲突
  若媒体查询内的样式被其他更高优先级的CSS规则覆盖，也会表现为不生效。可在DevTools的Elements面板中查看目标元素的样式，确认媒体查询样式是否被划掉。若存在优先级问题，可优化选择器层级提升优先级，必要时使用!important（优先调整选择器，尽量少用!important）。

• 混淆CSS像素与物理像素
  iPhone SE的物理像素是750×1334，但DevTools显示的375px是CSS像素（与设备像素比DPR相关）。确保媒体查询中使用的是CSS像素，不要将物理像素值写入规则。

内容的提问来源于stack exchange，提问作者Exit Code 1