css中的像素在iphone6 plus与iphone6渲染的不一样效果

    最近作项目中，遇到了一个问题，就是UE拿着一张图片来问我，为何iphone6下面的一个图片，在iphone6 plus下看起来更大。因而我好说歹说，让他接受了这种变化，可是其实这种变化的原理，仍是得深究的。

1. 什么是PPI

---

    首先要了解一个名词：PPI，百度百科上这么解释道：Pixels Per Inch也叫像素密度，所表示的是每平方英寸所拥有的像素数量。

    分享咱们已知的一些参数：

机型	物理分辨率	逻辑分辨率
iphone5	640×1136	320×568
iphone6	750×1334	375×667
iphone6 plus	1080×1920	414×736

    从上方咱们能够看出，iphone5/iphone6的物理分辨率，是逻辑分辨率的2倍。并且，开发移动端的同窗应该也知道，通常UE会给咱们一张图，让后在咱们开发的时候，让咱们去除2。

    也就是说，其实UE是按照物理分辨率去设计的，而咱们呢，是按照逻辑分辨率去写代码的。因此，咱们须要对于UE图上的单位进行除2。

    然而，6plus比较神奇的打破了这个规律，它的物理分辨率，是逻辑分辨率的2.6倍左右，因而乎，难不成让UE去按照1080*1920作个图，而后，咱们拿到的数都除以2.6?要死了...要死了...要死了...

    善良的苹果公司，考虑到了咱们的感觉，因而，咱们的射鸡湿，伪装iphone6 plus的分辨率是：1242×2208，而后，给到程序猿的时候，说：“你除以3吧”，咱们一除，果真是414*736的节奏呀，这不就是iphone6 plus的逻辑分辨率么。作完以后，咱们觉得屏幕上是1242×2208的图像，但实际上，渲染出来，到咱们眼中的时候，是1080*1920的图像。也就是说，苹果把咱们脑补的渲染图给缩小了。

 

2. 像素的真实展示

---

    咱们把话题绕回来，知道了上面的一些状况后，咱们一块儿算一下，1px在iphone6上面和iphone6 plus上面，究竟是多少cm

   

    2.1 首先是iphone6:

    1px的逻辑像素 === 2px的真的物理像素 === 2px *63.5px/326ppi  === (1/64)cm

   

    2.2 而后是iphone6 plus：（注意，这里面的ppi使用1080的真实物理尺寸算的）

    1px的逻辑像素 === 3px的，咱们觉得是3px的物理像素  ===  3*1080/1242 的真的物理像素 === 2.6px *63.5px/401ppi ===(2.6/157)cm

 

    这样看来，在iphone6s plus 和iphone6 plus下，在真实世界的显示上面，尺寸会比iphone6/iphone5等，大1.15倍左右，经测量（拿尺子量的），的确是有这样的倍数关系。

    如今各位同窗应该不难理解，为何在iphone6(s) plus下，咱们的元素看起来会比较大一些了把。