window.devicePixelRatio是浏览器提供的只读属性，表示设备物理像素与CSS像素的比率，如值为2表示1个CSS像素由2×2个物理像素渲染，该值会随系统缩放、横竖屏切换等动态变化。

可以通过 window.devicePixelRatio 直接获取当前窗口的设备像素比（DPR）。

什么是 devicePixelRatio

devicePixelRatio 是一个只读属性，表示设备物理像素与 CSS 像素之间的比例关系。例如：

• 普通显示器上通常为 1（1 物理像素 = 1 CSS 像素）
• Retina 屏 Mac 或高端手机常见值为 2 或 3
• 部分安卓设备可能为 1.5、2.75 等非整数值

如何安全读取 DPR

虽然大多数现代浏览器都支持该属性，但仍建议加一层存在性判断：

const dpr = window.devicePixelRatio || 1;

也可以封装成工具函数：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

function getDevicePixelRatio() {
  return typeof window !== 'undefined' && window.devicePixelRatio
    ? window.devicePixelRatio
    : 1;
}

注意响应式变化

在某些场景下（如 macOS 中缩放设置变更、iOS Safari 横竖屏切换），devicePixelRatio 可能动态变化。如需监听更新，可使用 resize 或 orientationchange 事件粗略感知，但更可靠的方式是监听 matchMedia 的 (resolution) 媒体查询：

const media = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
media.addEventListener('change', () => {
  console.log('DPR changed to:', window.devicePixelRatio);
});

常见用途举例

主要用于图像适配、Canvas 渲染、高精度布局等场景：

• 生成 2x 图片地址：img.src = 'icon.png'.replace('.png', `@${Math.round(dpr)}x.png`)
• Canvas 绘制时缩放画布：canvas.width = width * dpr; canvas.style.width = width + 'px';
• 判断是否为高清屏做样式微调（配合 CSS @media）

不复杂但容易忽略：它不是 BOM 的“方法”，而是一个直接可用的只读属性，无需调用任何函数。