iPhone屏幕尺寸和分辨率

[+]

1. iPhone屏幕尺寸和分辨率方面的一些小姿势 20160303
   1. DPI和PPI是什么鬼
   2. pt和px有什么不同
   3. iPhone 66s Plus分辨率是1242 x 2208为何渲染后分辨率变为1080 x 1920

iPhone屏幕尺寸和分辨率方面的一些小姿势 20160303

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

刚开始看见上面的表格时候，我有三个疑问，

1. DPI和PPI是什么意思？

2. pt和px是有什么不同？

3. 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，命名好的文件丢入资源文件夹内，只要代码报纸一直，文件名称不变即可。