Media queries 精度异常求助：Chrome下断点与预期不符

这问题我之前帮同事排查过，大概率是缩放导致的CSS像素与视觉宽度不匹配，咱们一步步拆解原因和验证方法：

1. Chrome页面缩放是最可能的元凶 #

你遇到的1350px设置却在1215px触发的情况，刚好符合「页面缩放为90%」的换算逻辑：1350px * 0.9 = 1215px。媒体查询里的max-width是基于CSS逻辑像素计算的，但你手动拖拽窗口时感知的是视觉上的物理宽度，当Chrome页面缩放不是100%时，两者就会出现偏差。

检查方法：点击Chrome右上角的三点菜单 → 「缩放」，确认是否是100%。如果不是，调回100%后再测试，应该就能正常触发媒体查询了。

2. Mac系统显示缩放的叠加影响 #

你的MacBook是Retina屏，物理分辨率2560x1600，但检测到的1440x900是CSS逻辑像素——这是系统开启了显示缩放导致的（系统偏好设置 → 显示器 → 缩放选项）。系统缩放会改变逻辑像素和物理像素的比例，如果再叠加Chrome的页面缩放，就会进一步放大偏差。

3. 其他排查方向（可能性较低） #

• 开发者工具设备模拟模式：如果之前打开过设备工具栏（快捷键Cmd+Shift+M）没关闭，浏览器会处于模拟移动设备的状态，可能自带缩放规则，导致媒体查询异常。按快捷键关闭后再测试。
• CSS规则优先级冲突：虽然你说其他页面正常，但可以检查一下是否有更高优先级的CSS规则（比如行内样式、!important）覆盖了你的媒体查询样式。在开发者工具的「元素」面板里找到对应的th.column-hidden元素，查看样式面板里的媒体查询规则是否生效。

验证小技巧 #

打开Chrome开发者工具（F12），在控制台输入window.innerWidth并回车，然后慢慢调整窗口宽度，当列开始隐藏时，看这个输出值是否等于1350px：

• 如果等于，说明是你感知的视觉宽度和CSS逻辑像素的缩放差异；
• 如果不等于，再检查上述其他排查点。

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