什么是物理像素和逻辑像素？设备像素比（DPR）是什么？

物理像素和逻辑像素

物理像素

物理像素是指设备屏幕上实际存在的发光点，是屏幕显示的最小物理单位。例如：

• iPhone 14 Pro 的屏幕分辨率为 2556×1179，这意味着它有 2556×1179 个物理像素
• 物理像素是硬件固定的，无法通过软件改变

逻辑像素

逻辑像素是 CSS 像素，是 Web 开发中使用的抽象单位。它是一个相对单位，浏览器会根据设备的特性将其映射到物理像素上。例如：

• 当你设置width: 100px时，这里的 100px 指的是逻辑像素
• 逻辑像素的大小会根据设备的 DPI（每英寸点数）自动调整

设备像素比（DPR）

定义

设备像素比（Device Pixel Ratio，简称 DPR）是物理像素与逻辑像素的比值：

DPR = 物理像素 / 逻辑像素

常见设备的 DPR 值

DPR 的作用

1. 保持视觉一致性：通过 DPR，不同设备上相同逻辑像素的元素看起来大小相近
2. 提高显示清晰度：高 DPR 设备用更多物理像素显示一个逻辑像素，使图像更清晰
3. 响应式设计：开发者可以根据 DPR 调整图片和布局

在 JavaScript 中获取 DPR

// 获取设备像素比constdpr=window.devicePixelRatio||1;console.log('设备像素比:',dpr);

在 CSS 中处理 DPR

/* 针对高 DPR 设备加载高清图片 */@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.logo{background-image:url('logo@2x.png');background-size:100px 50px;}}/* 针对普通 DPR 设备 */@media(-webkit-max-device-pixel-ratio:1.5),(max-resolution:191dpi){.logo{background-image:url('logo.png');}}

在 Canvas 中处理 DPR

constcanvas=document.getElementById('myCanvas');constctx=canvas.getContext('2d');constdpr=window.devicePixelRatio||1;// 获取 CSS 设置的逻辑尺寸constrect=canvas.getBoundingClientRect();// 设置 canvas 的物理像素尺寸canvas.width=rect.width*dpr;canvas.height=rect.height*dpr;// 缩放绘图上下文，使绘图操作使用逻辑像素ctx.scale(dpr,dpr);// 现在可以使用逻辑像素进行绘图ctx.fillRect(0,0,100,100);// 实际上会在 200×200 的物理像素区域绘制

实际应用场景

1. 图片适配：为不同 DPR 设备提供不同分辨率的图片（如image.png、image@2x.png、image@3x.png）
2. Canvas 绘图：确保 Canvas 在高 DPI 屏幕上清晰显示
3. 移动端开发：处理不同设备的显示差异
4. 响应式设计：根据设备特性调整布局和字体大小

理解这些概念对于开发跨设备、跨平台的高质量 Web 应用非常重要！