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

可紊 提交于 2019-12-01 15:47:57

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!