名稱解釋

物理像素（設(shè)備分辨率）

物理分辨率：顯示屏的最佳分辨率，即屏幕實際存在的像素行數(shù)乘以列數(shù)的數(shù)學(xué)表達(dá)方式，是顯示屏固有的參數(shù)，不能調(diào)節(jié)，其含義是指顯示屏最高可顯示的像素數(shù)。

（我們可以這樣理解，如：iphone5物理分辨率640*1136，那么他實際上橫軸有640個點，縱軸有1136個點。）

設(shè)備獨立像素（邏輯分辨率）（dips）

設(shè)備獨立像素 device-independent pixels(dips)是由設(shè)備自己確定的 iPhone5： 320*568

設(shè)備像素比

設(shè)備像素比=物理像素/設(shè)備獨立像素 window.devicePixelRatio = 物理像素/ dips iPhone5的設(shè)備像素比為2； （以上名稱有點混亂：物理像素就是設(shè)備分辨率。大家一一對應(yīng)） 個人意會： 從橫向上，手機(jī)用2個設(shè)備獨立像素來模擬1個物理像素

iPhone具體的分辨率

如果我們設(shè)計的時候用單位px，可以說是物理分辨率尺寸。 如果我們設(shè)計的時候用單位pt，可以說是邏輯分辨率尺寸。

默認(rèn)視口寬度

大部分手機(jī)的視口默認(rèn)寬度是980px（有個別手機(jī)是其他大小）; 獲取視口的寬度 方法一： 瀏覽器中審查元素; 方法二： document.documentElement.clientWidth;

我們不寫下面代碼的時候，我們可以利用的寬度就980px

手機(jī)訪問一個網(wǎng)頁的時候，內(nèi)部有一個虛擬容器的概念（就是viewport）。當(dāng)不寫上面代碼的時候為980px; 當(dāng)我們在里面寫如下代碼的時候,便會產(chǎn)生水平滾動條

很多瀏覽器端的網(wǎng)頁的寬度設(shè)為980px，有一個目的就是當(dāng)用手機(jī)去訪問的時候，正好不產(chǎn)生水平滾動條。

很好，皆大歡喜。但是為啥還要后面很多復(fù)雜的概念呢？ 。。。 因為pc端的屏幕很大，放980px寬度，我們每個字都可以看的很清楚。但是巴掌大的手機(jī)同樣也放980px寬度的網(wǎng)頁內(nèi)容，上面的圖片和字都太小了。

這個980px和上面的邏輯分辨率又是什么關(guān)系呢？ 個人感覺是把這個980px按比例縮小為了邏輯分辨率。 980px –> 邏輯分辨率 如iPhone5：

如果不希望縮小，我們就可以去設(shè)置視口的大小（默認(rèn)視口為980px）.如下代碼：

然后將寬度為1200px的div放進(jìn)去，會出現(xiàn)水平滾動條。980px的div就也會出現(xiàn)水平滾動條。 （在用瀏覽器模擬手機(jī)端實驗的時候，會出現(xiàn)bug.不能展示出上面的效果。）

注意： 因為手機(jī)的設(shè)備像素比是不同的，所以這個值我們不能設(shè)定死。 所以我們需要寫代碼把他弄活。

這樣我們設(shè)置的視口大小就等于設(shè)備的獨立像素。

一般我們都寫成

最后：我們網(wǎng)頁就把這個視口作為最外面的容器，把body放入這個容器內(nèi)。并且根據(jù)這個外部的容器放大縮小。