2、屏幕尺寸与分辨率：物理像素与逻辑像素、DPR（设备像素比）、常见设备尺寸一览表

做跨平台适配，第一个绕不开的概念就是「像素」。

我刚开始做移动端开发时，被各种像素概念搞得晕头转向。什么物理像素、逻辑像素、DPR……说白了，就是同一个「点」，在不同设备上叫法不一样。今天咱们彻底把它理清楚。

物理像素，就是屏幕上一颗一颗发光的点。你买手机时说的「1920×1080」，指的就是物理像素。每个像素点能独立显示颜色，它们密密麻麻排在一起，组成你看到的画面。

逻辑像素，也叫CSS像素、设备独立像素（DIP）。它是我们写代码时用的单位。比如你写 width: 100px，这个 px 就是逻辑像素。

为什么要有两套像素？

你想想看，早期iPhone的屏幕是320×480物理像素。后来Retina屏出来了，物理像素翻倍到640×960。如果我还按物理像素写代码，同样的 width: 320px，在旧手机上占满屏，在新手机上只占一半——这显然不合理。

所以系统引入了一个「中间层」：逻辑像素。不管物理像素怎么变，我写代码永远按逻辑像素来。系统自动帮我把逻辑像素映射到物理像素上。

一句话总结：

DPR，全称 Device Pixel Ratio，设备像素比。公式很简单：

DPR = 物理像素 / 逻辑像素

举个例子：

DPR 为 2 意味着：1个逻辑像素对应2×2=4个物理像素。所以Retina屏看起来特别细腻，因为每个「点」用了4颗发光点来渲染。

我的经验：

我在项目中遇到过一个问题：设计师给了一张100×100的图标，在普通屏上看着挺好，放到Retina屏上就糊了。为什么？因为逻辑像素100px对应物理像素200px，但图片只有100px的物理数据，系统只能强行拉伸，自然就糊了。

解决方案：切图时按2倍、3倍尺寸输出。比如图标设计成100×100逻辑像素，那就要准备100×100（1倍）、200×200（2倍）、300×300（3倍）三套图。现在用SVG或Icon Font能省掉这个麻烦，但原理你得懂。

做适配时，最头疼的就是记不住各种设备的尺寸。我整理了一份常用设备的参数，建议收藏：

设备	物理像素	逻辑像素	DPR	屏幕尺寸（英寸）
iPhone SE（一代）	640×1136	320×568	2	4.0
iPhone 6/7/8	750×1334	375×667	2	4.7
iPhone 6/7/8 Plus	1080×1920	414×736	≈2.6	5.5
iPhone X/XS/11 Pro	1125×2436	375×812	3	5.8
iPhone 12/13/14	1170×2532	390×844	3	6.1
iPad Pro 11英寸	1668×2388	834×1194	2	11.0
iPad Pro 12.9英寸	2048×2732	1024×1366	2	12.9
华为 Mate 40 Pro	1344×2772	393×851	≈3.4	6.76
小米 13	1080×2400	360×800	3	6.36
MacBook Pro 14英寸	3024×1964	1512×982	2	14.2

注意：

我曾经踩过一个坑：以为所有设备的逻辑像素宽度都是整数。结果iPhone 6 Plus的逻辑像素是414×736，但它的DPR是2.6，物理像素是1080×1920。你算一下：414×2.6=1076.4，不等于1080。实际上系统做了缩放处理，渲染时按3倍渲染再缩放到物理屏上。

所以做适配时，别死磕精确的物理像素值。以逻辑像素为准，让系统去处理映射关系。

下面这张图，把物理像素、逻辑像素、DPR的关系画清楚了。我建议你多看几遍，理解透了这个图，后面讲适配方案时你会觉得豁然开朗。

嗯，这张图其实就讲了三件事：

我个人习惯在项目初期就确定好基准逻辑像素宽度。比如移动端以375px为基准，PC端以1440px为基准。这样后面写样式时，心里有个锚点，不会跑偏。

避坑指南：

我曾经在做一个混合开发项目时，Android端和iOS端的DPR处理方式不一样。Android有些设备的DPR是2.75这种非整数，导致1px边框在某些设备上显示粗细不一。后来我统一用 0.5px 配合 transform: scale(0.5) 来处理细边框，才解决了这个问题。

所以记住：DPR 不一定是整数，遇到非整数DPR时，多留个心眼。

好了，像素这块的核心概念就这些。理解透物理像素、逻辑像素、DPR三者的关系，后面讲百分比适配、rem适配、viewport适配时，你就能明白每种方案到底在解决什么问题。