为客户开发的网站出现内容重叠问题，无法复现疑似纵横比适配异常

一、用户提供的环境参数无异常 #

给出的所有运行参数符合Windows系统缩放的正常计算逻辑：

• 19201080物理分辨率屏幕开启150%系统缩放后，CSS逻辑分辨率正好为1280720，devicePixelRatio返回值1.5完全匹配
• 浏览器视口宽高、外框尺寸的计算值均无异常，引用内容末尾的多浏览器测试是分辨率检测工具的自带版权说明，和当前故障环境无关

二、排查修复方向 #

• 校验响应式断点阈值：125%缩放是典型的断点边界触发场景，1920*1080屏幕开125%缩放后CSS逻辑分辨率为1536px，恰好卡在多数站点设置的1200px/1600px断点的中间区间，如果断点设置没有留冗余，或者存在硬编码的固定宽高/边距，就容易出现布局偏移重叠
• 排查尺寸相关的硬编码逻辑：检查JS代码中是否有直接读取screen.width、window.innerWidth做布局计算的逻辑未兼容devicePixelRatio差异，CSS中是否存在大量固定px单位的容器尺寸设置，未适配缩放后的逻辑像素变化
• 对齐用户环境测试：优先使用Firefox 93版本开展测试，不同浏览器对非整数倍缩放的渲染逻辑存在差异，仅用Chrome测试容易遗漏场景
• 使用Windows自定义缩放功能模拟环境：Windows 10及以上系统支持手动输入100%-500%区间的任意缩放值，设置后重启浏览器即可模拟对应环境，无需专门寻找原生支持对应缩放比例的设备

根因说明 #

你后续定位到的纵横比设置触发故障属于这类布局问题的常见场景：非整数倍系统缩放会导致CSS像素与物理像素映射出现小数精度误差，手动模拟的缩放和原生系统缩放的渲染逻辑存在差异，才会出现模拟无法复现、原生设备才能复现的情况。修复时建议全站优先使用相对单位（rem、vw、百分比）替代固定px单位，断点设置预留10-20px的冗余区间，可有效避免同类问题复发。

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