关于iPhone6/6Plus分辨率及图片分辨率的问题（一）

iPhone 6, 6 Plus一出，给iOS开发者带来了更加头痛的屏幕适配问题。以前的iPhone 5相对于iPhone4仅仅是屏幕增高一些，现在宽高都变了。

首先我们先了解一下屏幕物理分辨率（暂且这么称呼）与显示分辨率的区别。物理分辨率就是屏幕的宽高像素数。和屏幕大小是完全成正比的。iPhone大小有3.5寸，4.0寸，4.7寸，5.5寸，物理分辨率的宽度分别是320，320，375，414，也就是我们看到的屏幕大小就是物理分辨率大小，屏幕越宽，物理分辨率也越大。可以想象成物理宽度。显示分辨率，就是说在这块屏幕上面能够以最佳效果显示的图片的像素大小。注意是最佳效果，也就是如果图片分辨率再小一些，就会有模糊感，分辨率再大一些，也不会增加清晰度，至少我们人类用肉眼是看不出来清晰度有提升的。这就是最佳效果，这就是屏幕的显示分辨率，可以理解为能够容纳的图片像素。有一个值可以测量二者之间的关系——PPI，百度它的意思就是，每英寸的像素数目，也就是没英寸长度所能够容纳的像素数目。长度对应物理长度，像素对应显示的图片像素。其实这里的物理分辨率就是我们开发过程中用到的坐标数字。

比如iPhone4以前的屏幕物理分辨率和和显示分辨率都是320*480的，也就是把屏幕分成320*480个小方块，每个小方块正好可以显示长宽都是1像素的一张小图片。而且是以最佳效果显示，没有拉伸感，即使放入一张2*2的图片也不会更加清楚。这个是完全由屏幕的材料决定的。这就是@x，1倍图的由来。1倍，是显示分辨率相对于屏幕分辨率得出的一个倍数。

从iPhone4开始，一直到iPhone6(不包括Plus)，屏幕的显示效果得到了很大的提升，iPhone4物理屏幕大小没变，但是显示的图片像素长宽都提升一倍。也就是单位长度里面容纳的像素数目提升一倍，即PPI提升一倍，由原来的163提升到326。图片显示效果比原来提升明显，没有了以前的颗粒感觉。这就是所谓的Retina技术，肉眼已经区分不出来单独的像素“颗粒”。这就是@2x，2倍图的由来。2倍，在我们代码里面设置大小的一个控件，需要一张长宽都是2倍的图片来填充。

iPhone6 Plus，这个特殊的玩意又变了（用户用上大屏是爽了，我们开发者都恨死它了吧）。如果按照以前2倍的关系。6P的物理宽度是414，那么它的显示宽度应该是828，但是科技发展到现在，各个厂商都在拼参数，苹果也不甘落后，于是引入了新的屏幕，这个新的屏幕的PPI达到了401，也就是同样宽度的屏幕已经比原来容纳的像素数又有了提升，更何况宽度也比原来宽了，这样两个因数相乘：以5为标准，(414/320)*(401/326)*640(这个是基数)约等于1018.49，接近1080。至于1080和PPI401哪个是因，哪个是果，我也不清楚，反正二者的关系就是这么个关系。也就是说6P的显示分辨率的宽度是1080，高度按比例得出1920。也就是说给一张分类率是1080*1920的图片全屏显示，就会达到最佳效果，再小会拉伸，再大也不会更加清楚(可能还会损失性能)。

那么问题来了，6P上面到底应该用几倍的图片呢，2倍显然已经不合适了。如果是全屏的话，1080 / 320约为3.37，1080 / 375约为2.88，于是结合iPhone5和iPhone6，采用了3倍的图片。这就是@3x，3倍图的由来。

首先我们先转一组iphone5，iphone6和iphone6 plus的一些数据对比：

                                                                                        iphone5/s       iPhone 6           iPhone 6 Plus
尺寸                                                                                 4”                  4.7”                 5.5”
Viewport’s device-width (in CSS pixels)                       320                 375                   414
Viewport’s device-width (Android设备同分辨率参考)   360                 360                   400
Device Pixel Ratio 像素比                                                2                     2                       3  (近似值)  
Rendered Pixels 渲染像素 (默认 viewport size * dpr)      640x1136       750×1334         1242×2208
Physical pixels 物理像素（手机显示像素）                       640x1136       750×1334         1080×1920
PPI 每英寸所拥有的像素数                                                326                 326                   401

Status Bar 状态栏高 (px)                                                  40                   40                     60

Title Bar   导航条高 (px)                                                   88                   88                     132

Tab Bar   底栏高 (px)                                                       98                   98                     147

桌面 icon  (px)                                                                 120                 120                   180

图片资源后缀名                                                                @2x               @2x                  @3x