很多术语其实都是从国外引进来的”舶来品“,在翻译成打中文的时候,总会或多或少的存在着一些bug,在知识传播的途中,这些错误会被一步又一步地放大,最终可能会变成开发人员每次都必踩过的坑。

物理像素

物理像素(physical pixel)也叫屏幕像素,是设备屏幕里实打实的、真实存在着的像素,它是控制显示的最小单位。打个比方,一台iPhone 6 手机的分辨率是750 × 1334,就是用的设备像素单位。

在同一个设备上,物理像素是实打实存在,并且个数是固定的,你也改变不了,因为这是厂商在出厂时就设置好了的。

设备独立像素

设备独立像素(device-independent pixel),我跟喜欢称他为逻辑像素,因为这听起来感觉跟设备无关(事实上的确没有直接关系)。逻辑像素即程序控制使用的虚拟像素,是一种抽象的单位,在web编程中,我们最经常接触到的,便是CSS像素了。在chrome的模拟iphone6环境中,可以看到浏览器标记的iphone6分辨率为375 × 667,手机上的逻辑像素又称为手机的逻辑分辨率如下:

设备像素比

设备像素比(device pixel ratio) 也叫设备缩放比,在同一个设备上是固定不变的,表示的是设备物理像素与逻辑像素的比例。 公式为:

物理像素 = 设备独立像素 * 设备像素比;

当DDR = 1时,设备物理像素与逻辑像素的比例即为1:1。代表,1个物理像素对应1个css像素,听着是不是很熟悉,对啦,pc端的网页开发就是这样的情况,所以从pc转到移动网页这边来,很多人都要踩到的这个坑就在这来。

当DDR = 2时,也就是物理像素与逻辑像素的比例为2:1 表示的 一个方向上的2个物理像素对应1个css像素,也可以这么理解:在这个设备上,要用4个物理像素来显示1个css像素。这下明白逻辑像素为什么是抽象单位了吧。

每英寸像素

每英寸像素(pixels per inch),又称像素密度,表示的是每英寸屏幕中包含的所有物理像素的数目。

公式为:屏幕物理分辨率 / 屏幕面积(inch)

总结:总的来说,也不算复杂,坑踩踩就过去了,这些东西,有时候去网上搜,搜半天出来的都是一些错误的解释,会更混淆你视听,还是谷歌靠谱,以上,记录以备忘。