最近做项目中,遇到了一个问题,就是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下,我们的元素看起来会比较大一些了把。