怎么通过HTML的window.devicePixelRatio获取设备像素与CSS像素比-html教程-PHP中文网

window.devicepixelratio 返回当前设备物理像素与css像素的比率，如值为2表示1个css像素由4个物理像素渲染，值为1.25对应非整数缩放场景，且该值会随系统缩放、窗口移动等动态变化。

怎么通过html的window.devicepixelratio获取设备像素与css像素比

什么是 `window.devicePixelRatio`，它返回什么值

window.devicePixelRatio 是浏览器提供的只读属性，表示当前显示设备的物理像素与CSS像素的比率。比如值为 2，说明 1 个 CSS 像素在屏幕上实际由 2×2 = 4 个物理像素渲染；值为 1.25（常见于 Windows 高 DPI 缩放设置）则对应非整数缩放场景。

它不是固定常量，会随系统缩放设置、浏览器窗口是否被缩放、甚至部分移动端横竖屏切换而动态变化。因此不能在初始化时读一次就缓存长期使用。

直接读取 `window.devicePixelRatio` 的典型错误

最常见误区是假设它只在页面加载时有意义，或认为它能准确反映图像应使用的分辨率。实际上：

页面加载后用户可能调整系统缩放比例（如 Windows 按 Ctrl + 鼠标滚轮），但 window.devicePixelRatio 不会自动触发事件通知变化
在 iframe 中，子页面的 window.devicePixelRatio 取决于其自身所在上下文，不一定和顶层窗口一致
某些旧版 Safari（window.screen.availWidth 和 document.documentElement.clientWidth 交叉验证

监听设备像素比变化的可靠方式

浏览器没有原生的 devicepixelratiochange 事件，但可通过 matchMedia 监听 resolution 媒体查询来间接捕获变化：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

const mediaQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
function handleDPRChange(e) {
  console.log('DPR changed to:', e.matches ? window.devicePixelRatio : 'unknown');
}
mediaQuery.addEventListener('change', handleDPRChange);
// 注意：需在初始时也调用一次 handleDPRChange，避免漏掉首次值

该方法兼容 Chrome、Firefox、Safari（14+）和 Edge。低于 Safari 14 时建议 fallback 到定时轮询（如每 500ms 检查一次），但仅作兜底——多数现代场景已足够稳定。

用 `window.devicePixelRatio` 适配图片和 Canvas 的关键细节

它本身不解决渲染问题，只是计算依据。真正生效需要配合具体操作：

对于 <img>：需手动设置 srcset 或用 picture 元素提供 2x 图片，window.devicePixelRatio 仅用于 JS 动态选图逻辑（如 img.src = 'icon@' + Math.round(dpr) + 'x.png'）
对于 <canvas></canvas>：必须同时设置 DOM 属性宽高（CSS 尺寸）和 canvas 内部的 width/height 属性，例如：canvas.width = canvas.offsetWidth * dpr，否则会模糊
不要四舍五入 window.devicePixelRatio：它可能是 1.25、1.5、2.5 等，直接取整会导致在中等缩放设备上失真