什么是物理像素和逻辑像素？设备像素比（DPR）是什么？-平芜编程栈

物理像素和逻辑像素

物理像素

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

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

逻辑像素

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

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

设备像素比（DPR）

定义

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

DPR = 物理像素 / 逻辑像素

常见设备的 DPR 值

设备类型	DPR 值	说明
普通显示器	1	1个逻辑像素 = 1个物理像素
iPhone 6/7/8	2	1个逻辑像素 = 2×2个物理像素
iPhone 14 Pro	3	1个逻辑像素 = 3×3个物理像素
MacBook Pro (Retina)	2	1个逻辑像素 = 2×2个物理像素

DPR 的作用

保持视觉一致性：通过 DPR，不同设备上相同逻辑像素的元素看起来大小相近
提高显示清晰度：高 DPR 设备用更多物理像素显示一个逻辑像素，使图像更清晰
响应式设计：开发者可以根据 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 的物理像素区域绘制