物理像素和逻辑像素
物理像素
物理像素是指设备屏幕上实际存在的发光点，是屏幕显示的最小物理单位。例如：
- 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 的物理像素区域绘制实际应用场景
- 图片适配：为不同 DPR 设备提供不同分辨率的图片（如
image.png、image@2x.png、image@3x.png） - Canvas 绘图：确保 Canvas 在高 DPI 屏幕上清晰显示
- 移动端开发：处理不同设备的显示差异
- 响应式设计：根据设备特性调整布局和字体大小
理解这些概念对于开发跨设备、跨平台的高质量 Web 应用非常重要！
