HTML中devicePixelRatio获取设备像素比的用途与方法-html教程-PHP中文网

window.devicepixelratio 是动态实时指标，需用 matchmedia('(resolution: xdppx)') 监听变化并重绘；仅初始化读取会导致 canvas 模糊、图片失真、布局错位，因其随缩放、换屏、dpi 设置等场景实时变动，非设备常量。

html中devicepixelratio获取设备像素比的用途与方法

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();

注意两点：

CodeGeeX

CodeGeeX是一款基于大模型的智能编程助手。

下载

不要用 (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，都会导致线条发虚、文字锯齿。