【移动端】基础知识

1. 设备像素（物理像素）

物理像素（Device Pixel）是显示设备（如手机、电脑显示器）屏幕上的最小物理显示单位。每个物理像素都能够显示某种颜色和亮度，它们排列在一起，构成了我们看到的屏幕图像。

设备的分辨率通常用物理像素的数量来表示，例如 1920x1080 表示屏幕横向有 1920 个像素，纵向有 1080 个像素。（对于电脑来说是横纵比，对于手机来说一般是纵横比）

特点：

• 每个物理像素代表一个屏幕上的实际点。
• 分辨率越高，屏幕上的物理像素越多，理论上显示的图像越清晰。

示例：

• iPhone 13 的（物理像素）分辨率是 2532x1170，这表示屏幕的横向有 1170 个物理像素，纵向有 2532 个物理像素。

2. 屏幕尺寸

屏幕尺寸通常指屏幕对角线的物理长度，以英寸（inch）为单位。屏幕尺寸直接决定了设备的物理显示区域。

特点：

• 屏幕尺寸与设备的物理大小有关，通常用对角线的长度表示（例如，6.1 英寸的手机屏幕）。
• 屏幕尺寸越大，显示的内容区域越广，但不一定和分辨率成正比。

示例：

• iPhone 13 的屏幕尺寸是 6.1 英寸，这指的是屏幕对角线的长度。

3. 像素密度（PPI）

像素密度（Pixel Density）是每英寸包含的物理像素数量，通常以 PPI（Pixels Per Inch）为单位。它决定了屏幕的清晰度——PPI 越高，图像的细节越清晰，因为每英寸内的像素数量更多。

特点：

• 像素密度越高，屏幕显示的图像、文字越清晰。
• PPI 是设备分辨率和屏幕尺寸的综合反映，分辨率高而屏幕尺寸小的设备，PPI 通常较高。
• Retina 屏幕（苹果设备的高 PPI 屏幕）是一个典型的高像素密度的屏幕，使得人眼在正常观看距离下无法辨别出单个像素点。

公式：

示例：

• iPhone 13 的屏幕分辨率是 2532x1170，屏幕尺寸为 6.1 英寸，因此它的 PPI 大约是 460。

4. CSS 像素（设备独立像素、逻辑像素）

CSS 像素（CSS Pixel），也称为 设备独立像素（Device Independent Pixel, DIP）或 逻辑像素，是开发者在 CSS 或 JavaScript 中使用的虚拟像素单位。CSS 像素与物理像素的映射关系由设备的 像素比（DPR） 决定。

特点：

• CSS 像素是相对于显示效果的逻辑单位，而非物理上的像素单位。
• 在高 PPI 设备上，一个 CSS 像素可能对应多个物理像素。例如，在 Retina 显示屏上，一个 CSS 像素可能等于 4 个物理像素。
• 通过使用 CSS 像素，开发者可以为不同分辨率和像素密度的设备设计响应式的页面，而无需考虑具体的设备像素。

示例：

• 假设某个按钮的宽度设定为 100px，在高像素密度的设备上，它可能实际上占用 200 个物理像素宽度（如果设备的像素比是 2）。

所以这样就出现一个问题，同样大小 px （css 像素），在不同分辨率（像素）上的实际大小是不相同的。

解决方法也很简单，就是把它们对应的比例进行调整：

正如上面的图片所示，以前CSS像素和设备像素1：1关系，1个CSS像素对应1个设备像素，那么现在我修改这个比例，1个CSS像素对应2个设备像素即可。

以前在做PC端网页开发的时候，由于CSS像素始终和设备像素是1：1的关系
(不考虑缩放)，所以就出现一种错觉，以为CSS像素和设备像素就是1：1的对应关系，但是实际上CSS像素确是一个抽象的单位，具体含有多少个设备像素不是一定的。

5. 设备像素比（DPR，Device Pixel Ratio）

设备像素比（Device Pixel Ratio，简称 DPR）表示 CSS 像素与物理像素之间的比例。它告诉浏览器，每一个 CSS 像素在设备上应该映射为多少个物理像素。

特点：

• DPR 通常由设备厂商设定，用于表示设备显示的物理像素密度与逻辑像素之间的关系。
• 在 DPR 较高的设备（例如 Retina 屏幕）上，通常 DPR 值会大于 1，例如 DPR = 2 或 3，这意味着一个 CSS 像素将映射到 2x2 或 3x3 个物理像素。
• 常用的 DPR 值为 1（标准设备）、2（高密度设备，例如 Retina）和 3（超高密度设备）。

公式：
DPR = 物理像素数量 / CSS 像素数量

示例：

• iPhone 13 的 DPR 是 3，这意味着在这个设备上，每个 CSS 像素对应 3x3 = 9 个物理像素。

我们可以使用 window.devicePixelRatio 获取一个设置的 DPR 。

比如 iPhone6 分辨率的宽为 750 ，而宽度 为 375px 就刚好撑满整个屏幕宽度。

各个概念之间的关系

• 设备像素 是设备屏幕上实际显示的物理像素单位，它是屏幕分辨率的直接体现。
• 屏幕尺寸 决定了屏幕的物理大小，影响显示区域的大小。
• 像素密度（PPI）是每英寸内的物理像素数量，决定了屏幕的显示精细程度。相同的分辨率下，屏幕尺寸越小，PPI 越高，显示效果越精细。
• CSS 像素 是开发者用于布局的逻辑单位，一个 CSS 像素可以映射到多个物理像素。
• 设备像素比（DPR） 表示 CSS 像素与物理像素之间的比例，DPR 决定了一个 CSS 像素会映射到多少个物理像素。

举例说明

假设我们有一部手机：

• 屏幕尺寸：5 英寸
• 屏幕分辨率：1920x1080（即物理像素分辨率）
• DPR：2

计算 PPI：

1. 计算对角线的物理像素数量：
   ( \sqrt{1920^2 + 1080^2} ≈ 2202 )
2. 用物理像素数量除以屏幕尺寸：
   ( PPI = \frac{2202}{5} ≈ 440 )

这说明每英寸屏幕上有大约 440 个物理像素。

计算 CSS 像素：

• 由于 DPR = 2，那么每个 CSS 像素占用 2x2 = 4 个物理像素。因此，这台手机的实际逻辑像素（CSS 像素）宽度为 1080 ÷ 2 = 540， 高度为 1920 ÷ 2 = 960。

这意味着，开发者在这台设备上设计的一个 100px 宽度的元素，在显示时会占据 200 个物理像素的宽度。