如何判断dpr的倍数？

判断设备像素比 (DPR - Device Pixel Ratio) 的倍数，实际上就是获取 DPR 的值。在前端开发中，可以使用 JavaScript 的 window.devicePixelRatio 属性来获取 DPR。

const dpr = window.devicePixelRatio;
console.log("Device Pixel Ratio:", dpr);

if (dpr === 1) {
  console.log("DPR is 1x");
} else if (dpr === 2) {
  console.log("DPR is 2x");
} else if (dpr === 3) {
  console.log("DPR is 3x");
} else {
  console.log("DPR is other:", dpr);
}


// 或者使用 switch 语句
switch (dpr) {
  case 1:
    console.log("DPR is 1x");
    break;
  case 2:
    console.log("DPR is 2x");
    break;
  case 3:
    console.log("DPR is 3x");
    break;
  default:
    console.log("DPR is other:", dpr);
}

解释:

• window.devicePixelRatio 返回一个数值，表示设备物理像素与 CSS 像素的比率。例如，如果 DPR 为 2，则表示一个 CSS 像素对应两个设备物理像素。
• 通常情况下，DPR 的值会是整数，例如 1、2、3。但在一些设备上，DPR 也可能是小数，例如 1.5 或 2.5。

实际应用场景:

获取 DPR 的值通常用于以下场景：

• 加载高清图片: 根据 DPR 的值加载不同分辨率的图片，以确保在不同设备上都能显示清晰的图像。例如：

const img = new Image();
const dpr = window.devicePixelRatio;
img.src = `image@${dpr}x.png`; // 例如 image@2x.png, image@3x.png

• Canvas 绘图: 在使用 Canvas 绘图时，需要根据 DPR 的值调整 Canvas 的大小，以避免图像模糊。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio;

canvas.width = canvas.offsetWidth * dpr;
canvas.height = canvas.offsetHeight * dpr;
ctx.scale(dpr, dpr);

• 响应式设计: 根据 DPR 的值调整页面布局和样式。

需要注意的是:

• DPR 的值可能会根据用户的缩放操作而改变。
• 一些浏览器可能会对 DPR 的值进行限制或调整，以提高性能或兼容性。

通过 window.devicePixelRatio，你可以轻松获取 DPR 的值，并根据 DPR 的值进行相应的处理，以提升网页在不同设备上的显示效果。