摘要：會(huì)各種折行，樣式錯(cuò)亂，那么細(xì)致如蘋果肯定不允許這種事情發(fā)生。又一次變遷蘋果公司在年，推出了新一代的，他們的屏幕都比要寬要大。

歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：

https://segmentfault.com/blog/frontenddriver

不同于PC時(shí)代，移動(dòng)web的樣式更加多樣，也由于手機(jī)分辨率的碎片化，移動(dòng)web的兼容問題日益突出，下面，我就和各位讀者一起聊聊移動(dòng)web所面臨的手機(jī)分辨率問題。

在PC時(shí)代，我們書寫CSS的時(shí)候，理所應(yīng)當(dāng)?shù)恼J(rèn)為，我們所書寫的1px，在屏幕上就是1px的寬度。
但是到了移動(dòng)端，事情就不是這樣了，我們所書寫的1px，其實(shí)到了屏幕上，可能是2px，可能是3px。甚至是你想多少px就多少px。這是為什么呢？讓我們來說一個(gè)故~事~~~
蘋果發(fā)布ios的時(shí)候，肯定會(huì)想到成千上萬的PC網(wǎng)頁，沒法在自己的IOS系統(tǒng)上運(yùn)行起來時(shí)間多么蛋疼的事情啊。但是呢，這些網(wǎng)頁都是按照PC屏幕的大小寫的呀。
動(dòng)不動(dòng)就出現(xiàn)兩個(gè)500多px的寬的div并列。這在當(dāng)時(shí)640*960屏幕大小的iphone4上顯示的話，簡(jiǎn)直是毀滅性的。(會(huì)各種折行，樣式錯(cuò)亂)，那么細(xì)致如蘋果肯定不允許這種事情發(fā)生。
于是蘋果公司的攻城獅們想出了一個(gè)歪招，那就是告訴瀏覽器，“你在一個(gè)980寬的大屏幕下在渲染呢”，瀏覽器就按照了980寬的方式，渲染出來頁面圖像。可是到了瀏覽器這邊，其實(shí)是拿到了一張渲染好的、比屏幕大的網(wǎng)頁圖像。此時(shí)，蘋果再把這張圖像，縮放一下，縮為屏幕大小。(我們平時(shí)也經(jīng)常這樣干，把一張大圖片用雙指放大縮小)

在手機(jī)上觀察segmentfault的電腦版，正式這樣的(如圖1.1)

圖1.1

上面所說的瀏覽器就按照了980寬的方式，渲染出來頁面圖像。瀏覽器的渲染依據(jù)，我們就稱為layout viewport。其實(shí)我們可以指定欺騙瀏覽器的寬度是多少。

比如，我們默認(rèn)的viewport寬度是980px，我們寫了一個(gè)寬度為480的div，顯示在網(wǎng)頁上的時(shí)候，是這樣(如圖1.2.1所示)：?

    


    
測(cè)試

圖1.2.1

如果我們書寫viewport標(biāo)簽，讓其布局的時(shí)候，告訴瀏覽器，自己是一個(gè)寬度為480的小屏幕，又會(huì)怎樣呢？(如圖1.2.2所示)

    
    


    
測(cè)試

圖1.2.2

此時(shí)，瀏覽器就真的按照寬度為480的樣子去渲染了。這就是viewport的魅力。這個(gè)viewpor的寬度是任我們更改的，究竟更改到多少才算合適呢？

大多數(shù)網(wǎng)站采取的方式是

width=device-width，就是別忽悠瀏覽器了，像PC上一樣，手機(jī)屏幕多寬，瀏覽器就照著多寬去渲染吧。

這是一個(gè)比較好的方案，因?yàn)檫@下子，不會(huì)再有什么縮放問題了。設(shè)計(jì)就是按照手機(jī)去設(shè)計(jì)，顯示也按照手機(jī)去顯示，好看了很多(如圖1.2.3)。

    
    
    


    
測(cè)試

圖1.2.3

時(shí)代是在變遷的，iphone也不例外，iphone3的像素為320480，然而到了iphone4，雖然屏幕不曾變大，但是像素密度大大增加，變?yōu)榱?40960，總不能把之前設(shè)計(jì)的網(wǎng)頁都縮小一倍顯示吧？所以蘋果公司的老司機(jī)們就又開車了。

iphone4對(duì)瀏覽器說，“我的寬度是320px”，其實(shí)iphone4是640px。我們按照320px的設(shè)計(jì)得以渲染，而到了真實(shí)的世界中，我們寫的1px的元素，其實(shí)是化為2px渲染到用戶面前的。有的同學(xué)可能會(huì)說，這不是把之前的網(wǎng)頁變大了嗎？

nonono，別忘了，手機(jī)的大小并沒有變，只不過是物理世界上的1英寸，上面的像素點(diǎn)數(shù)更多了。以前1px的屏幕像素點(diǎn)，展現(xiàn)在人眼面前是1/96英寸，像素密度變?yōu)閮杀逗螅粋€(gè)像素的寬度是1/962英寸。那么兩個(gè)像素就是21/(96*2)=1/96英寸。物理世界上的寬度又變回來了。

換句話說，雖然像素變大了，但是10px的圖片在iphone3與iphone4上看起來是一樣大的。

在這里，我們已經(jīng)學(xué)會(huì)了兩個(gè)知識(shí)點(diǎn)：

1.?320px的邏輯分辨率，對(duì)于我們來說，無論是iphone3gs還是iPhone4，我們都照著320px去寫代碼就好了，這是我們的邏輯。

2.?320px/640px的物理分辨率，對(duì)于蘋果手機(jī)來說，iphone3gs，他就真的按照320px去顯示，640px的iPhone4，它就將我們寫的邏輯分辨率乘以2再顯示。這就是為什么iphone4上面物理分辨率是邏輯分辨率的兩倍的緣故了。UE給你的圖，你除以2去寫代碼就好了。

蘋果公司在2014年，推出了新一代的iphone6/iphone6 plus，他們的屏幕都比iphone4要寬、要大。所以，再維持原來的320寬度方法，顯然不行了。所以，蘋果公司按照手機(jī)尺寸的比例，上調(diào)了分辨率：

我們看到上圖，iphone6的寬為750px，iphone4的寬為640px(物理分辨率)，比例應(yīng)該是：750/640
iphone6的邏輯分辨率的寬是375px，iphone4的邏輯分辨率的寬為320px，比例是：375/320。
750/640 == 375/320，所以，蘋果公司只是把手機(jī)普普通通的擴(kuò)大了一點(diǎn)而已。順便把邏輯分辨率也擴(kuò)大了。并不影響我們的書寫。

這次升級(jí)，最蛋疼的點(diǎn)就是iphone6 plus了，蘋果公司希望更高清的屏幕，于是他們?cè)僖淮问┱勾蠓ǎ粔K5.5英寸的屏幕上，竟然容得下寬度1080的像素點(diǎn)數(shù)量。

但是，蘋果的老司機(jī)們又犯難了，該如何“欺騙瀏覽器”呢？這次是朝著3倍的方向壓縮的。即1個(gè)邏輯像素對(duì)應(yīng)3個(gè)物理像素。但是，事實(shí)根本不是這樣，他們只在與iphone4同樣寬度的屏幕上，渲染出2.6個(gè)像素點(diǎn)，iphone4渲染出2個(gè)，iphone3gs渲染出1個(gè)。

所以，按照我們之前的理論，是不是邏輯像素就應(yīng)該是1080/2.6呢。的確是的，1080/2.6~=414px，所以，我們的邏輯分辨率就被定格在了414*736。

但是！2.6這個(gè)比例太蛋疼了，蘋果是真心想讓我們相信它家的屏幕好呀，于是蘋果公司再一次施展欺騙大法，它讓我們認(rèn)為，他的屏幕是12422208的超級(jí)高清屏幕。于是，好像是在與iphone3同樣的1px的屏幕尺寸里面，塞下了3個(gè)像素點(diǎn)。于是我們用1242除以3，還是得到了我們的邏輯分辨率：414px。而且，UE(設(shè)計(jì)師)們出一張1242的圖片，工程師們將其除以3，遠(yuǎn)比UE們出一張1080px的圖片，工程師將其除以2.6要爽得多。試想一下，除以2.6好算還是除以3好算？但是，iphone6s plus，實(shí)際的渲染是1080px,咋整？縮放唄，于是被瀏覽器渲染好的12422208的圖像，被iphone6s plus給縮放成了1080*1920(就好像我們用手指頭縮放過的圖片一樣)

這個(gè)3倍還是2倍的比例，前端可以從瀏覽器中獲取：window.devicePixelRatio

結(jié)論就是，iphone6s plus，我們可以認(rèn)為，它的物理分辨率是邏輯分辨率的三倍就好了，UE給你的圖，你除以3去寫代碼就好了。

幾代iphone手機(jī)的分辨率如圖4.2.1所示：

圖4.2.1

根據(jù)上述，我們的出結(jié)論，雖然一樣的邏輯像素，在iphone6上面和在iphone6 plus上面也是不一致的，因?yàn)閕phone6 plus會(huì)對(duì)其渲染后的圖像進(jìn)行縮放。

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

1px的邏輯像素 === 3px的，我們以為是3px的物理像素 === 31080/1242 的真的物理像素 === 2.6px 63.5px/401ppi ===(2.6/157)cm

這樣看來，在iphone6s plus 和iphone6 plus下，在真實(shí)世界的顯示上面，尺寸會(huì)比iphone6/iphone5等，大1.15倍左右，經(jīng)測(cè)量（拿尺子量的），的確是有這樣的倍數(shù)關(guān)系。

蘋果的變遷史我們說完了，是時(shí)候說說更亂的安卓了。其實(shí)，了解完了蘋果的機(jī)制，安卓的也并不難理解，這些零散的安卓設(shè)備，他們也都采用了物理像素是邏輯像素N倍的設(shè)計(jì)方法，當(dāng)然，這個(gè)N是多少，就要看安卓的制造廠商了。總之，我們?cè)诎沧可系拇a，也是按照邏輯像素渲染的。

聰明的你，知道如何描述什么是邏輯分辨率，什么是物理分辨率了嗎？

接下來的一篇文章，我將會(huì)和讀者們一起聊聊iconfont那些事兒，不要走開，請(qǐng)關(guān)注我.....

https://segmentfault.com/a/1190000005904616

原創(chuàng)文章,版權(quán)所有,轉(zhuǎn)載請(qǐng)注明出處