iPhone设备现在有多种分辨率,如下表所列,
设备 | 屏幕尺寸 | 分辨率(pt) | Reader | 分辨率(px) | 渲染后 | PPI(DPI) |
---|---|---|---|---|---|---|
iPhone 3GS | 3.5寸 | 320 x 480 | @1x | 320 x 480 | 空 | 163 |
iPhone 4/4S | 3.5寸 | 320 x 480 | @2x | 640 x 960 | 空 | 326 |
iPhone 5/5S/5C | 4.0寸 | 320 x 568 | @2x | 640 x 1136 | 空 | 326 |
iPhone 6/6S | 4.7寸 | 375 x 667 | @2x | 750 x 1334 | 空 | 326 |
iPhone 6/6S Plus | 5.5寸 | 414 x 736 | @3x | 1242 x 2208 | 1080 x 1920 | 401 |
刚开始看见上面的表格时候,我有三个疑问,
-
DPI和PPI是什么意思?
-
pt和px是有什么不同?
-
iPhone 6/6s Plus分辨率是1242 x 2208,为何渲染后分辨率变为1080 x 1920?
针对以上三个问题,我遵循内事不决问百度,外事布局问谷歌的原则,在网上找了一些答案,以下是简单的解答。
1. DPI和PPI是什么鬼?
DPI(Dots Per Inch)最初用于衡量打印无上每英寸的点数密度,就是说你的打印机可以在一英寸内打多少个点。DPI值越小,图片越不惊喜。
当DPI的概念用在计算机屏幕上时候,就应该称之为PPI(Pixels Per Inch)。同理:PPI就是计算机屏幕上每英寸可以显示的像素点的数量。
Windows系统默认PPI是96,Mac OS系统默认PPI是72.一般费视网膜屏幕的桌面电脑的PPI在72到120之间,使用72到120之间的PPI进行设计基本可以保证你的作品在大多数情况下看起来都差不多。
举个栗子来说:27寸Mac的PPI是109,也就是每英寸有109个像素。显示器宽度(含边框)为25.7英寸,屏幕纯宽度差不多是23.5英寸,所以23.5 x 109 = 2560,由此可见屏幕的分辨率为2560 x 1440px。
视网膜屏幕与PPI:视网膜屏幕是在iPhone4发布时进入大众视野的,叫视网膜是因为屏幕的PPI高到人的肉眼无法看到像素点。从技术上来说就是他们在物理尺寸与上一代相同的屏幕上塞了2倍的像素,如下图所示,
这种情况下,不苏傲笑元素的大小,相同尺寸屏幕上的元素精度提高了2倍。原来一个像素的空间现在有4个像素,像素是原来的4倍。
iPhone 4采用Retina显示屏,在物理尺寸不变的情况下,像素成倍增加,达到了640 x 960像素。这样就出现了一个问题,怎样让原有的App运行在新的手机上面?为了运行之前的App,苹果公司引入了一个新的概念point(点),点这个概念在iOS开发中十分重要,而开发者很少关注。iPhone 4屏幕尺寸继续保持320 x 480,不过单位并非是像素,而是点。
在iPhone 3GS中,一个点等于一个像素,也就是说点跟像素可以直接互换;在iPhone 4中,一个点等于两个像素;在iPhone 6 Plus中,一个点等于3个像素。
iPhone 4和iPhone 3GS的屏幕尺寸实际上是一样的,都是3.5英寸。同样一个点,实际上看起来是一样的,只是iPhone 4在单位英寸上像素更多,看起来更加细腻。
2. pt和px有什么不同?
pt(Point)代表点,px(Piexl)表示像素,这是两个看起来很像、却完全不一样的单位,在某些场合它们是1:1的,在很多时候却常常被搞混,或是制作过程根本没有分清楚、导致结果不准确。在绘图软件里面可以看到基本单位设定里面就有这两个选择,
px,即是pixel,表示像素。是屏幕上所显示的最小单位,在分辨率高的屏幕上,一个像素可能会达到肉眼无法识别的大小,
pt,即是point,是一个标准的长度单位,定义上1pt = 1/72英寸,英雌他跟我们所熟悉的公分、公尺一样,可以明确的指出1pt的长度是多少,
pt也是常见的标识文字尺寸的单位,在绘图以及文书软件等几乎都是使用pt作为字体标尺的单位,故一般称呼[字级]时候,通常即是指pt。
pt和px理解青睐其实并不难,在应用的时候也相当单纯,在大部分的情况下适用的一个理论是:当设计的目的是用于供屏幕浏览,则趋向于使用px以方便掌握细节;而如果是为了做输出打印的需求,使用pt则是较好的选择。
在iPhone 3GS时代,分辨率和点是1:1,到了iPhone 4,分辨率和点是2:1的关系,而在iPhone 6 Plus设备上,分辨率和点事3:1,所以为了方便开发人员开发,iOS中统一使用点(Point)对界面元素的大小进行描述,这样分辨率的差异对于开发者来说就不是问题了,在开发层面来说,开发者无需进行分辨率和点的单位换算,完全感觉不到点和分辨率的差异。
当我们说一个iPhone设备的分辨率时候,实际上我们是用的pt(点)作为描述分辨率的单位;当我们和UI讨论图片的尺寸时候,实际说的是px(像素)来作为描述图片的单位。
3. iPhone 6/6s Plus分辨率是1242 x 2208,为何渲染后分辨率变为1080 x 1920?
iPhone 6 Plus除外,其他所有iPhone的PPI是一致的,都是326,用@2x素材。
但是iPhone 6 Plus的实际PPI是401,理论上苹果应该用401 / 326 x @2x = @2.46x的素材,但是这个奇葩的臂力对于开发者而言很难切图,所以苹果为了方便开发者就采用了@3x的素材,然后再缩放到@2.46x的屏幕上,也就是缩放到2.46 / 3 = 83%,实际上苹果选取了一个接近比例的87%。这样算下来,物理分辨率和虚拟分辨率的比率是87%,也就是1080 / 0.86 = 1242,1920 / 0.87 = 2208。好处是开发者更方便,比如准备素材时候,字号可以直接调整为3x的。
让我们再来看一下不同iPhone设备的分辨率和像素的对照表,
手机 | pt | px | PPI(DPI) |
---|---|---|---|
iPhone 4/4S/5/5S/5C/6 | 10 | 20 | 326 |
iPhone 6/6S Plus | 10 | 30 | 401 |
对于iPhone 6 Plus之前的手机,pt和px的比例是1:2,而iPhone 6 Plus出来之后,这一比例达到了1:3,同时分辨率达到了1242 x 2208(使用iPhone 6 Plus截屏,再上传到电脑看,就是这个分辨率),而iPhone 6 Plus实际分辨率为1080 x 1920,分辨率的比率为1.15:1。对于ppi,iPhone 6 Plus之前均为326,而之后变为401。
素材资源发生的变化@3x,在实际开发中,素材通常是UI美眉负责提供,从@2x到@3x,素材的分辨率提高了1.5倍,例如一个@2x的素材大小为44x44,那么响应的@3x大小分辨率为66x66,文件命名的方式依然没变,$(IMG_NAME)@3x.png,命名好的文件丢入资源文件夹内,只要代码报纸一直,文件名称不变即可。