最近剛剛接觸移動端的頁面開發(fā)绒障，遇到的第一個問題就是搞清楚多屏適配的方案状原。要知道多屏適配的原理就要知道移動端各種屏幕大小對開發(fā)的影響嘱吗，最基礎(chǔ)的是像素和 viewport 的概念迁客。以下是網(wǎng)上一些像素及 viewport 的資料的知識梳理（絕大多數(shù)就是總結(jié)于 ppk 兩篇談?wù)?viewport 的文章 one交播，two，圖片亦是出自于 ppk 的文章）蝇裤。
在 pc 開發(fā)時代我們 css 用的最多的長度單位就是 px廷支，通常我們認為 css 里面的像素就是屏幕的物理分辨率。其實 css 像素和屏幕的物理像素標準上并沒有 1:1 的關(guān)系栓辜，只是在 pc 時代他們通常正好是 1:1恋拍，例外的情況極少，所以到了移動時代我們需要理清楚兩者關(guān)系才能知道多屏適配方案的遠離藕甩。讓我們從 pc 時代說起施敢。
PC時代
我們在做 pc 網(wǎng)頁開發(fā)的時候幾乎不涉及對 viewport 的修改，所以我們很少去關(guān)心 viewport狭莱，那么 viewport 指的是哪部分呢僵娃？我們知道一般一個 div 它的默認寬度是 100% 撐滿其父節(jié)點，那么 body 下的 div 就是 body 的寬度腋妙，body 就是 html 的寬度默怨，而 html 的寬度是由誰限定的呢？ 瀏覽器骤素？又或者說是 window匙睹？其實正是一個叫 viewport 的東西，它才是默認情況下限定頁面寬度的最外層“容器”济竹。只是我們在做 pc 網(wǎng)頁開發(fā)的時候默認情況下 viewport 和 window 是同樣大小的痕檬。
viewport 的尺寸可以通過 document.documentElement.clientWidth/height 來獲取，瀏覽器窗口的尺寸可以通過 window.innerWidth/height 來獲取送浊。viewport梦谜，瀏覽器窗口尺寸的單位都是 css 像素，但是他們含義有點不同袭景。如果你放大一個網(wǎng)頁時唁桩，你看到的頁面元素雖然變大了，但是你用 js 獲取他們的尺寸是沒有變化的浴讯，也就是說元素的尺寸在 css 這個衡量的坐標系下并沒有變化朵夏，100px 寬依然是 100px。只是電腦使得 css物理像素比增大了榆纽，原來1個 css 像素占1個物理像素仰猖，當你放大網(wǎng)頁一倍的時候，1個 css 像素占用了4個物理像素奈籽。而瀏覽器窗口尺寸的含義是你這個窗口內(nèi)可以容納多少個 css 像素饥侵。譬如默認情況下如果你頁面寬度是 1024px 寬占滿了整個瀏覽器窗口，那么 window.innerWidth 就是 1024px衣屏。當你把網(wǎng)頁放大一倍時躏升，由于css物理像素比變大了，瀏覽器窗口從寬度角度看看只有原來一半的網(wǎng)頁狼忱，也就是只能容納 512 個 css 像素膨疏。你再去獲取 window.innerWidth 它的值就是512一睁。所以說 viewport 和瀏覽器窗口的尺寸都是以 css 像素作為單位的。順便說下屏幕的尺寸是通過 screen.width/height 來獲取的佃却，原則上他們也是 css 像素為單位的者吁，但是 pc 時代我們很少關(guān)心他們，也不能改變他們饲帅。在 pc 時代絕大多數(shù)情況下我們是在 css 像素和物理像素 1:1 的情況下開發(fā)的复凳，所以我們也不太糾結(jié)我們頁面元素尺寸的衡量體系。
移動時代
iphone4 以前的手機屏幕無論是大小和分辨率都是很低的灶泵，iphone3 的分辨率是 320x480育八。如果在手機瀏覽器里面看 pc 的網(wǎng)頁，而且如果手機瀏覽器依然使用css物理像素 1:1 的方式去顯示網(wǎng)頁赦邻，那么我們相當于只能在一個網(wǎng)頁上畫一個320x480 框框髓棋，用戶使用這個框框來左右移動窺探這個網(wǎng)頁，這顯然是不好用的深纲。
手機瀏覽器廠商就做了一個英明的決策仲锄，把手機瀏覽器默認的 viewport 的尺寸放大，譬如說 980px湃鹊，而瀏覽器窗口默認情況下就是容納一個 100% 寬的 viewport儒喊，所以如果一個 980px 寬的 pc 網(wǎng)頁在手機端打開，默認情況下手機瀏覽器也能看到整個網(wǎng)頁币呵，只是這個網(wǎng)頁是被縮小的怀愧。這個時候我們就能體會到 css 像素和物理像素的區(qū)別，手機分辨率寬雖然是320px的（物理像素）余赢，但是頁面寬度確是980px（css 像素）芯义。
但是這個時候還是依然不好用啊，pc 端的元素在手機端看太小點不到啊妻柒，用戶在用的時候依然需要放大網(wǎng)頁扛拨。如果針對手機的寬度設(shè)計一個網(wǎng)頁那么不就解決這個問題了么，譬如把 viewport 設(shè)置成 320px 寬举塔，在這個尺寸下給網(wǎng)頁設(shè)計元素給網(wǎng)頁排版绑警。怎么設(shè)置 viewport呢？給 documnent.documentElement.width/height 賦值并沒有作用央渣，改變 html 元素的尺寸并不會影響 viewport 尺寸计盒，只會造成如下的情況（html是變小了，但是 viewport依然很寬）：
蘋果公司給出了一個 meta 標簽用來控制 viewport 的大醒康ぁ（隨后被其他瀏覽器競相效仿）：<meta name="viewport" content="width=320">北启，通過這個標簽指定 width 可以控制 viewport 的大小，你可以寫一個 css 像素的值譬如<meta name="viewport" content="width=320">，但是理想情況下最好是和手機屏幕一樣寬咕村，也就是 device-width场钉，這樣 iphone3 初始化的 viewport 就是 320px 寬了。使用 meta 可以讓我們在手機端也能做到在css物理像素 1:1 情況下開發(fā)網(wǎng)頁懈涛。
但是隨著 iphone4 的發(fā)布惹悄，人們發(fā)現(xiàn)其分辨率達到了驚人的 640x960，此時原來在 320 寬的標準下開發(fā)的網(wǎng)頁在 iphone4 上怎么呈現(xiàn)肩钠，難道以后開發(fā)手機網(wǎng)頁需要適配兩個屏寬了？其實 google 已經(jīng)在 android 系統(tǒng)上給出了一種叫密度無關(guān)像素的解決方案（density-independent pixel暂殖，或者叫 device-independent pixel价匠，簡稱 dip，dp 都可以）呛每。簡單舉個例子踩窖，當使用<meta name="viewport" content="width=device-width">來設(shè)定手機瀏覽器 viewport 的寬度時，如果是同一個尺寸的屏幕無論分辨率是多少 viewport 都是一個固定的值晨横。設(shè)備寬度（device-width）單位將不是物理像素洋腮，而是密度無關(guān)像素（dip）。這樣大大減少了開發(fā)人員適配不同分辨率手機的工作量手形，無論你的手機分辨率是 320x480啥供，還是 640x960伙狐，又或者是 960x1440贷屎，只要你寫上<meta name="viewport" content="width=device-width">，那么手機瀏覽器網(wǎng)頁的初始化寬度都是 320px唉侄。
當然不是所有的手機 device-width 都是 320px，上面我只是舉了簡化的例子榴嗅。隨著手機越出越多嗽测，device-width 的值也越來越多疏魏，光 iphone 我們就可以通過 paintcodeapp.com 給出的這張圖來看下，更不要說眾多的 android 手機只厘。
再提下 meta viewport 另外一個屬性值就是 initial-scale钠右，縮放比例搁凸。如果手機屏幕寬代表 320px(dip)，那么這么設(shè)置 <meta name="viewport" content="width=device-width, initial-scale=1.0">表示手機瀏覽器初始化 viewport 寬度是屏幕寬度且不進行縮放是為 320px椅文，如果設(shè)置成<meta name="viewport" content="width=device-width, initial-scale=0.5">表示手機瀏覽器初始化時候?qū)挾仁窃谄聊粚挾鹊幕A(chǔ)上把頁面縮小一倍，即 viewport 寬度是 device-width * 2 = 640px羡蛾。這些變化我準備在下一篇總結(jié)，因為這些變化加上手機分辨率精度的上升直接影響著多屏適配的最終方案浪藻。
簡單總結(jié)下移動端手機屏幕的尺寸像素值是密度無關(guān)像素dip施戴，頁面元素尺寸是 css 像素赞哗，當 <meta name="viewport" content="width=device-width, initial-scale=1.0">時，兩者的比例（dip:csspx）可以是1:1藤乙。是要多屏適配方案定下后，手機分辨率或者說物理像素基本不需要在開發(fā)時候考慮了毅人。下一篇將推演下淘寶的 lib.flexible.js 是如何做多屏適配的划煮。
