window.devicePixelRatio 是动态实时指标，需用 matchMedia('(resolution: Xdppx)') 监听变化并重绘；仅初始化读取会导致 Canvas 模糊、图片失真、布局错位，因其随缩放、换屏、DPI 设置等场景实时变动，非设备常量。
window.devicePixelRatio 不是用来“获取一次就完事”的静态配置，而是必须动态响应、配合渲染逻辑使用的实时指标。它直接决定图像是否模糊、Canvas 是否失真、布局是否错位——读错时机或忽略变化，90% 的高 DPI 适配问题就出在这儿。
为什么不能只在页面加载时读取 window.devicePixelRatio
这个值会随用户操作实时变动，不是初始化快照。常见触发场景包括：
- Windows 用户按
Ctrl + 鼠标滚轮调整浏览器缩放级别 - macOS 用户切换显示器（如从 MacBook 内屏移到 4K 外接屏）
- 移动端横竖屏切换（部分 Android WebView 中
window.devicePixelRatio会突变） - 系统级 DPI 设置变更（如 Windows 显示设置中从 100% 切到 125%）
一旦缓存了初始值，后续所有 Canvas 绘图、image-set() 选图、rem 基准计算都会用错比例，导致图像模糊或元素尺寸偏移。它不是“设备型号决定的常量”，而是“当前渲染上下文的瞬时状态”。
监听 window.devicePixelRatio 变化的唯一可靠方式
浏览器没有 devicepixelratiochange 事件，但可用 matchMedia 监听 resolution 媒体查询变化，这是目前兼容 Chrome、Firefox、Safari 14+ 和 Edge 的标准方案：
立即学习“前端免费学习笔记（深入）”；
const mediaQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
function handleDPRChange(e) {
const currentDPR = window.devicePixelRatio;
console.log('DPR now:', currentDPR);
// 触发重绘、重设 canvas 缓冲区、更新图片 srcset 等
}
mediaQuery.addEventListener('change', handleDPRChange);
// 必须手动调用一次，避免首次匹配被跳过
handleDPRChange();注意两点：
- 不要用
(min-resolution: 2dppx)这类静态断言来监听，它不会触发 change 事件 - 旧式
-webkit-device-pixel-ratio在 Safari 16.4+ 已弃用，且不支持事件监听
在 Canvas 中使用 window.devicePixelRatio 必须同步缩放缓冲区
Canvas 模糊的根本原因：CSS 尺寸（如 width: 200px; height: 100px）和底层绘图缓冲区（backing store）未按 DPR 对齐。正确做法是：
- 用
canvas.width/canvas.height设置物理像素尺寸：canvas.width = canvas.clientWidth * window.devicePixelRatio - 用 CSS 控制显示尺寸（即
clientWidth），保持逻辑像素一致 - 绘图前调用
ctx.scale(dpr, dpr)，让坐标系与物理像素对齐
漏掉任意一步，比如只改 width 不缩放 ctx，或只缩放 ctx 不重设 width，都会导致线条发虚、文字锯齿。
@media 查询该用 min-resolution 还是 -webkit-min-device-pixel-ratio
现代项目一律用 min-resolution: 2dppx（等价于 192dpi），理由很实际：
-
-webkit-min-device-pixel-ratio: 2是非标准语法，Chrome 111+、Firefox 119+ 已停止支持无前缀版本 -
2dppx单位直觉匹配设计师的 @2x 说法，无需换算 96dpi 基数 - IE 不支持
resolution？那说明你还在维护 IE——这种场景下，JS 回退比写两套媒体查询更可控
真正容易被忽略的是：媒体查询只控制样式，不改变 <img> 的 src。要实现高清图自动加载，得靠 srcset 或 image-set()，而不是仅靠 @media。
