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下，咱們的元素看起來會比較大一些了把。