浏览器缩放与渲染差异检测

1. 设备像素比 (devicePixelRatio): -

硬件级缩放因子，如 Retina 屏通常为 2

2. 浏览器实际缩放级别（估算）: -

此值通过 DOM 与 Canvas 技巧估算，较准确

3. 视口宽度 (CSS像素): - px

4. 屏幕宽度 (设备像素): - px

5. 用户代理 (User Agent): -

6. 操作系统缩放影响: -

Windows/macOS 缩放设置会影响所有应用

检测原理说明

我们通过创建一个 <div> 并设置固定 CSS 像素 尺寸，然后用 Canvas 绘制相同尺寸的图形，比较其在设备像素下的实际渲染尺寸，从而反推出当前浏览器的缩放比例。