Media Query在Chrome devTools测试正常 实际显示器显示效果异常

• 优先补充页面视口meta声明，这是前端适配最基础的配置，漏写会导致浏览器不按实际设备尺寸渲染页面：

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

• 排查系统显示缩放设置，Windows、macOS默认可能开启了100%以上的系统级缩放，你观测到的1745px宽度是缩放后的逻辑像素值，属于正常情况。如果需要匹配物理像素，可以用min-resolution媒体查询规则匹配屏幕DPI，日常开发优先适配逻辑像素即可，符合普通用户的实际使用场景。
• 检查Grid容器的宽度配置，如果你给Grid容器设置了固定宽度、max-width或者外边距限制，会导致容器无法撑满视口，容易被误判为分辨率读取错误。可以临时添加调试样式确认容器实际尺寸：

  .grid-container {
    border: 2px solid red;
    box-sizing: border-box;
  }
  

• 调整媒体查询的代码顺序，把媒体查询规则写在默认Grid样式之后，保证适配规则优先级足够不会被覆盖，同时媒体查询优先基于min-width/max-width（视口宽度）判断，不要依赖Grid内部的尺寸计算触发适配。

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