设备独立像素与物理像素的对应关系,可以这样看:
类似的每四个一组的对应关系,也许正是 Retina
显示技术所做的。
4、DPR(device pixels ratio)
4.1 定义
设备像素比(dpr 描述的是未缩放状态下,
物理像素
和CSS像素
的初始比例关系,计算方法如下图。
4.2 理解
设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素,如2代表1个css像素用2x2个设备像素来绘制。
设备像素比(dpr),公式为1px = (dpr)^2 * 1dp
,可以理解为1px由多少个设备像素组成;
5、PPI(pixels per inch)
5.1 定义
每英寸像素取值,更确切的说法应该是像素密度,也就是衡量单位物理面积内拥有像素值的情况。
5.2 ppi是如何计算出来的呢?
顾名思义,每英寸的像素点(设备像素),已知屏幕分辨率和主对角线的尺寸,则ppi
等于
以爱疯6为例:
我们知道,ppi越高,每英寸像素点越多,图像越清晰;我们可以类比物体的密度,密度越大,单位体积的质量就越大,ppi越高,单位面积的像素越多。
5.3 ppi和dpr到底什么关系?
毕竟这些参数是外国人先发明的,他们会优先选择自己熟悉的计量单位作为显示设备的工厂标准参数,因此ppi
就用作显示设备的工业标准;
告诉业界人士,ppi
达到多少是高清屏,此时对应的dpr是多少,而不直接告诉你我现在的显示设备dpr
是多少,毕竟人们直接听到像素分辨率会更加有反应。
设备像素比与ppi相关,一般是ppi/160的整数倍:
6、倍率与逻辑像素
6.1 基本关系
用iPhone 3gs和4s来举例。假设有个邮件列表界面,我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行,4s就能显示9-10行,而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示,3gs上刚刚好的效果,在4s上就会小到根本看不清字。
在现实中,这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏,在Retina
屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小,反而和3gs效果一样了。画质却更清晰。
在以前,iOS应用的资源图片中,同一张图通常有两个尺寸。你会看到文件名有的带@2x字样,有的不带。其中不带@2x的用在普通屏上,带@2x的用在Retina
屏上。只要图片准备好,iOS会自己判断用哪张,Android
道理也一样。
由此可以看出,苹果以普通屏为基准,给Retin
a屏定义了一个2倍的倍率(iPhone 6plus
除外,它达到了3倍)。实际像素除以倍率,就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同,它们的显示效果