# 定义

devicePixelRatio 是浏览器中 window 对象的一个属性，用于获取设备的物理像素和逻辑像素之间的比例，通常用于适配高分辨率设备（如 Retina 屏幕）。它的值定义为设备的物理像素与 CSS 像素的比例（即一个 CSS 像素采用几个实际屏幕像素绘制）。这个值影响图像和画布在不同设备上的显示效果。

在高分辨率（Retina）设备上，devicePixelRatio 通常为 2 或更高，而在标准显示屏上为 1。

# 常见用途

1. 画布绘图：在高分辨率设备上绘图时，可以使用 devicePixelRatio 来缩放 canvas，确保画布内容的清晰度。

2. 媒体查询：在 CSS 中，可以利用 devicePixelRatio 来定义不同的分辨率适配样式。

以下是一个在 canvas 上使用 devicePixelRatio 的示例：

const canvas = document.getElementById("myCanvas");

const ctx = canvas.getContext("2d");

// 获取 devicePixelRatio

const dpr = window.devicePixelRatio || 1;

// 设置 canvas 的宽高以适应设备的分辨率

canvas.width = canvas.clientWidth * dpr;

canvas.height = canvas.clientHeight * dpr;

// 缩放 context，以便在高分辨率设备上清晰显示

ctx.scale(dpr, dpr);

// 绘制内容

ctx.fillStyle = "blue";

ctx.fillRect(10, 10, 100, 100);