揭秘移动端像素问题
2025/3/2 | 字数检测:4076文章探讨移动端应用如何适配不同尺寸手机屏幕。核心概念包括物理像素、逻辑像素(如CSS像素、Android的DP)和设备像素比(DPR)。物理像素是设备固定像素点,逻辑像素是显示内容使用的抽象单位。DPR(物理像素/逻辑像素)用于确保内容在不同设备上显示尺寸一致。Android的DP(密度无关像素)结合DPI(每英寸像素数)实现屏幕适配,以160dpi为基准,使内容在不同像素密度的设备上保持相对大小。
笔者最近准备开发一个移动端的小应用,想起来一个问题,手机的尺寸都不一样,如何做到适配的呢?下面就我查询到关于像素问题资料做一个总结。
主要分为了这么几个概念:DP、DPI、DPR
有关像素问题的单位和概念表格如下:
| 缩写 | 全称 | 说明 |
|---|---|---|
| PX | Device Pixels | 设备像素,指设备的物理像素 |
| PX | CSS Pixels | CSS 像素,指 CSS 样式代码中使用的逻辑像素 |
| DOT | Dot | 点,屏幕或打印纸上的点,等同物理像素 |
| PT | Point | 磅(传统长度单位)为 1/72 英寸=0.35mm |
| PT | iOS Point | 磅(iOS 长度单位),为 1/163 英寸,等同于 CSS 逻辑像素 |
| DP | Density independent Pixels | 设备无关像素(Android 长度单位),为 1/160 英寸,等同于 CSS 逻辑像素 |
| SP | Scale independent Pixels | 缩放无关像素(Android 字体单位),等同于 CSS 逻辑像素,但文字尺寸可调(单独缩放) |
| DPR | Device Pixel Ratio | 设备像素比,指 CSS 逻辑像素对于物理像素的倍数 |
| DPPX | Dots Per Pixel | 等同于 DPR |
| PPI | Pixel Per Inch | 屏幕上每英寸(2.54 厘米)的像 素点个数 |
| DPI | Dots Per Inch | 屏幕或纸上每英寸(2.54 厘米)的点个数,标准密度:传统打印=72;Windows=96;Android=160;iOS=163。 |
| DPIR | DPI Ratio | DPI 缩放比例,指 DPI 对于 Windows 标准 DPI 的倍数=DPI/96,等同于 DPR |
关于 DP、DPI、DIP 这几个概念非常混淆,分别来自几篇文章,他们都对其有不同的定义,或许是单词过去过来就那么几个 device、pixel
- 像素 / 分辨率 / 物理像素和逻辑像素
“ 因此将上述设备不能改变的、在设备一生产出来后就确定的像素称作 物理像素 ,也叫 设备像素(device pixels),简称 dp 。 与之对应的用于表示图片尺寸、可时刻改变的像素称作 逻辑像素,也叫 设备独立像素(device independent pixels),简称 dip 。”- 揭秘移动端 px,dpi,dpr
设备像素(dpi) “设备像素(Device Pixels,简写 DP):又称 物理像素 ,是设备能控制显示的 最小单位 ,我们可以把它看做显示器上的一个点。我们常说的 1920x1080 像素分辨率就是用的 设备像素单位”
这只是我看到的部分文章,就是因为那几个单词都有D P I,根本不好做定义,不过我们用中文直接说好了
主要有这么几个应该了解的概念,物理像素(物理硬件实际的像素点)、逻辑像素(又称设备无关像素、设备独立像素、密度无关像素)、设备像素比(DPR,这个是统一的),那么接下来就具体讲讲如何做到在不同设备上你看到的图像都是一样大的效果,揭开他们神秘的面纱
先说物理像素,他是我们设备生产出厂时已经确定好的,比如 2340 x 1080, 其实分辨率也就是物理像素高宽像素大小
其次是逻辑像素,也是上面说的一大堆命名,它们一起决定了设备如何显示呈现的内容,逻辑像素代表了显示内容的一像素占像素点的几个像素
正常情况下,一个逻辑像素表示一个物理像素,但每个设备不一样的情况下,就不可能刚好逻辑像素 === 物理像素,此时就引出来DPR(设备像素比)
它们之间有下面的关系
DPR = 物理设备像素 / 逻辑物理像素
来看一个例子,尺寸相同的两个设备,如果一个是宽度为 375px 的屏幕,一个为宽度为 1500px 的屏幕, 现在有一张 200x200 的图片,如果 DPR 同时为 1,这张图片在 1500px 的屏幕上会显得特别小,那么我们就要想办法把图片从像素方面着手放大,1500 : 375 = 4,如果我们把 1500px 的四个物理像素当一个来用,是不是就达到了显示图片一样大的效果,这四个像素就是一个逻辑像素,共同来显示图片的一个像素,此时第二个设备 DPR 等于 4,第二个设备的逻辑像素就和第一个一样了,375px
画个图来看看

注意:像素和手机尺寸没有绝对关系。
手机出厂 DPR 一般也是设置好了的,得到最好的显示效果
接下来看看在移动端的开发中,如何做到像素动态变化的吧
DPI,"dots per inch" 的缩写,“每英寸的像素数”,即像素密度。下图展示了 600 dpi 和 1200 dpi 的对比,明显后者的像素更加密集。

安卓手机种类多样,有各种屏幕像素密度。比如 120dpi 是低密度(ldpi)类型,160dpi 是中密度(mdpi),240dpi 是高密度(hdpi),320dpi 是超高密度(xhdpi),480dpi 是超超高密度(xxhdpi)。
那现在有很多不同的设备大小,我们如何去画设计图,有没有一个标准呢,想想如果我们还是使用 px 的单位,对不同屏幕像素密度不同的手机,虽然有 DPR 让我们显示大小适宜,但如果尺寸绝对固定,还是有比如尺寸过大的现象,所以我们必须要一个相对单位,适配不同的手机,那就是 dp
dp:Android 开发上的基于屏幕密度的一种密度无关的像素单位,1dp 代表的像素长度=density * 1 px
density:屏幕密度,规定以 160dpi 的屏幕其屏幕密度为 1,反过来说就是屏幕密度为 1 的屏幕上 1 英寸上有 160px
安卓定义 160dpi(dots per inch)的屏幕被视为基准屏幕密度,1dp 等于 1 物理像素。
dp 与 dpi 有以下关系:px = dp *(dpi/160)
如果我有一个 320dpi 的手机,那么 1dp 就变为了 2px,达到适应不同屏幕的效果
参考文章: Android 屏幕适配之 dp(最直观的解读)
PS.上面出现过的链接就不列举了