聊一聊移動web分辨率的那些事兒

歡迎你們收看聊一聊系列,這一套系列文章,能夠幫助前端工程師們瞭解前端的方方面面(不只僅是代碼):html

http://my.oschina.net/MrHou/blog?catalog=477313&temp=1466755903794前端

 

1 PC到移動,渲染的變遷ios


    在PC時代,咱們書寫CSS的時候,理所應當的認爲,咱們所書寫的1px,在屏幕上就是1px的寬度。瀏覽器

    可是到了移動端,事情就不是這樣了,咱們所書寫的1px,其實到了屏幕上,多是2px,多是3px。甚至是你想多少px就多少px。這是爲何呢?讓咱們來講一個故~~~事~~~~~前端工程師

    蘋果發佈ios的時候,確定會想到成千上萬的PC網頁,無法在本身的IOS系統上運行起來時間多麼蛋疼的事情啊。可是呢,這些網頁都是按照PC屏幕的大小寫的呀。iphone

    動不動就出現兩個500多px的寬的div並列。這在當時640*960屏幕大小的iphone4上顯示的話,簡直是毀滅性的。(會各類折行,樣式錯亂),那麼細緻如蘋果確定不容許這種事情發生。佈局

    因而蘋果公司的攻城獅們想出了一個歪招,那就是告訴瀏覽器,「你在一個980寬的大屏幕下在渲染呢」,瀏覽器就按照了980寬的方式,渲染出來頁面圖像。但是到了瀏覽器這邊,實際上是拿到了一張渲染好的、比屏幕大的網頁圖像。此時,蘋果再把這張圖像,縮放一下,縮爲屏幕大小。(咱們平時也常常這樣幹,把一張大圖片用雙指放大縮小)測試

    

其實咱們的開源中國就是這樣的。。。。。網站

 

2 能夠更改的佈局寬度spa


上面所說的瀏覽器就按照了980寬的方式,渲染出來頁面圖像。瀏覽器的渲染依據,咱們就稱爲layout viewport。其實咱們能夠指定欺騙瀏覽器的寬度是多少。

好比,咱們默認的viewport寬度是980px,咱們寫了一個寬度爲480的div,顯示在網頁上的時候,是這樣(如圖1.2.1所示): 

<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <h1 style="width:480px;background-color:#000;color:#fff;">測試</h1>
</body>
</html>

                                        圖1.2.1

 

若是咱們書寫viewport標籤,讓其佈局的時候,告訴瀏覽器,本身是一個寬度爲480的小屏幕,又會怎樣呢?(如圖1.2.2所示)

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=480" />
</head>
<body>
    <h1 style="width:480px;background-color:#000;color:#fff;">測試</h1>
</body>
</html>

                                      圖1.2.2

此時,瀏覽器就真的按照寬度爲480的樣子去渲染了。這就是viewport的魅力。這個viewpor的寬度是任咱們更改的,究竟更改到多少纔算合適呢?

大多數網站採起的方式是

width=device-width,就是別忽悠瀏覽器了,像PC上同樣,手機屏幕多寬,瀏覽器就照着多寬去渲染吧。

這是一個比較好的方案,由於這下子,不會再有什麼縮放問題了。設計就是按照手機去設計,顯示也按照手機去顯示,好看了不少(如圖1.2.3)。

<html>
<head>
    <meta charset="utf-8" />
    <style>
        body {
            padding: 0;
            margin: 0;
        }
    </style>
    <meta name="viewport" content="width=device-width" />
</head>
<body>
    <h1 style="width:320px;background-color:#000;color:#fff;">測試</h1>
</body>
</html>

                        圖1.2.3

 

3. 再次變遷的像素


    時代是在變遷的,iphone也不例外,iphone3的像素爲320*480,然而到了iphone4,雖然屏幕未曾變大,可是像素密度大大增長,變爲了640*960,總不能把以前設計的網頁都縮小一倍顯示吧?因此蘋果公司的老司機們就又開車了。

    iphone4對瀏覽器說,「個人寬度是320px」,其實iphone4是640px。咱們按照320px的設計得以渲染,而到了真實的世界中,咱們寫的1px的元素,實際上是化爲2px渲染到用戶面前的。有的同窗可能會說,這不是把以前的網頁變大了嗎?

    nonono,別忘了,手機的大小並無變,只不過是物理世界上的1英寸,上面的像素點數更多了。之前1px的屏幕像素點,展示在人眼面前是1/96英寸,像素密度變爲兩倍後,一個像素的寬度是1/96*2英寸。那麼兩個像素就是2*1/(96*2)=1/96英寸。物理世界上的寬度又變回來了。

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

    在這裏,咱們已經學會了兩個知識點:

    1. 320px的邏輯分辨率,對於咱們來講,不管是iphone3gs仍是iPhone4,咱們都照着320px去寫代碼就行了,這是咱們的邏輯。

    2. 320px/640px的物理分辨率,對於蘋果手機來講,iphone3gs,他就真的按照320px去顯示,640px的iPhone4,它就將咱們寫的邏輯分辨率乘以2再顯示。這就是爲何iphone4上面物理分辨率是邏輯分辨率的兩倍的緣故了。UE給你的圖,你除以2去寫代碼就行了。

4. 又一次變遷


    話說,蘋果公司在2014年,推出了新一代的iphone6/iphone6 plus,他們的屏幕都比iphone4要寬、要大。因此,再維持原來的320寬度方法,顯然不行了。因此,蘋果公司按照手機尺寸的比例,上調了分辨率:

4.1 iphone6的普通擴大

    咱們看到上圖,iphone6的寬爲750px,iphone4的寬爲640px(物理分辨率),比例應該是:750/640

iphone6的邏輯分辨率的寬是375px,iphone4的邏輯分辨率的寬爲320px,比例是:375/320。

750/640 == 375/320,因此,蘋果公司只是把手機普普統統的擴大了一點而已。順便把邏輯分辨率也擴大了。

4.2 iphone6 plus的擴大高清度

    此次升級,最蛋疼的點就是iphone6 plus了,蘋果公司但願更高清的屏幕,因而他們再一次施展大法,一塊5.5英寸的屏幕上,居然容得下寬度1080的像素點數量。

    可是,蘋果的老司機們又犯難了,該如何「欺騙瀏覽器」呢?此次是朝着3倍的方向壓縮的。即1個邏輯像素對應3個物理像素。可是,事實根本不是這樣,他們只在與iphone4一樣寬度的屏幕上,渲染出2.6個像素點,iphone4渲染出2個,iphone3gs渲染出1個

    因此,按照咱們以前的理論,是否是邏輯像素就應該是1080/2.6呢。的確是的,1080/2.6~=414px,因此,咱們的邏輯分辨率就被定格在了414*736。

    可是!2.6這個比例太蛋疼了,蘋果是真心想讓咱們相信它家的屏幕好呀,因而蘋果公司再一次施展欺騙大法,它讓咱們認爲,他的屏幕是1242*2208的超級高清屏幕。因而,好像是在與iphone3一樣的1px的屏幕尺寸裏面,塞下了3個像素點。因而咱們用1242除以3,仍是獲得了咱們的邏輯分辨率:414px。並且,UE(設計師)們出一張1242的圖片,工程師們將其除以3,遠比UE們出一張1080px的圖片,工程師將其除以2.6要爽得多。試想一下,除以2.6好算仍是除以3好算?可是,iphone6s plus,實際的渲染是1080px,咋整?縮放唄,因而被瀏覽器渲染好的1242*2208的圖像,被iphone6s plus給縮放成了1080*1920(就好像咱們用手指頭縮放過的圖片同樣)

    這個3倍仍是2倍的比例,前端能夠從瀏覽器中獲取:window.devicePixelRatio

    結論就是,iphone6s plus,咱們能夠認爲,它的物理分辨率是邏輯分辨率的三倍就行了,UE給你的圖,你除以3去寫代碼就行了。

幾代iphone手機的分辨率如圖4.2.1所示:

                                                            圖4.2.1

    這點,我有一篇文章進行了詳解,有興趣的同窗能夠詳細進行了解:

    http://my.oschina.net/MrHou/blog/610984

 

5 是時候說說安卓了


    蘋果的變遷史咱們說完了,是時候說說更亂的安卓了。其實,瞭解完了蘋果的機制,安卓的也並不難理解,這些零散的安卓設備,他們也都採用了物理像素是邏輯像素N倍的設計方法,固然,這個N是多少,就要看安卓的製造廠商了。總之,咱們在安卓上的代碼,也是按照邏輯像素渲染的。

6 課後問題


聰明的你,知道如何描述什麼是邏輯分辨率,什麼是物理分辨率了嗎?

 

接下來的一篇文章,我將會和讀者們一塊兒聊聊iconfont那些事兒,不要走開,請關注我.....

原創文章,版權全部,轉載請註明出處

相關文章
相關標籤/搜索