摘要：設(shè)備像素設(shè)備分辨率設(shè)備像素也叫物理像素。從圖中可以驗(yàn)證，橫縱方向的設(shè)備像素?cái)?shù)量恰好是設(shè)備獨(dú)立像素的倍。像素與設(shè)備獨(dú)立像素的關(guān)系縮放比例就是像素邊長設(shè)備獨(dú)立像素邊長。因?yàn)榈膶挾葲]有改變，無論以什么單位衡量設(shè)備像素設(shè)備獨(dú)立像素還是像素。

這篇文章是我在我的舊博客上發(fā)過的文章，最近又碰到這個(gè)問題，整理修改了一下發(fā)到這里。

像素單位有設(shè)備像素、邏輯像素和CSS像素3種。

設(shè)備像素也叫物理像素。

設(shè)備像素指的是顯示器上的真實(shí)像素，每個(gè)像素的大小是屏幕固有的屬性，屏幕出廠以后就不會改變了。
設(shè)備分辨率描述的就是這個(gè)顯示器的寬和高分別是多少個(gè)設(shè)備像素。
設(shè)備像素和設(shè)備分辨率交給操作系統(tǒng)來管理，瀏覽器不知道、也不需要知道設(shè)備分辨率的大小，瀏覽器只需要知道邏輯分辨率就可以了。

設(shè)備獨(dú)立像素也叫邏輯像素。

設(shè)備獨(dú)立像素(dips)是操作系統(tǒng)為了方便開發(fā)者而提供的一種抽象。應(yīng)用程序與操作系統(tǒng)之間描述長度時(shí)以設(shè)備獨(dú)立像素為單位，然后操作系統(tǒng)再將單位從設(shè)備獨(dú)立像素轉(zhuǎn)化為設(shè)備像素，從而控制屏幕上真正的物理像素點(diǎn)。

為什么需要在應(yīng)用程序與設(shè)備像素之間定義這么一種單位呢？為什么應(yīng)用程序不應(yīng)該直接使用設(shè)備像素來描述長度？
隨著顯示器制造技術(shù)越來越先進(jìn)，屏幕像素密度越來越高。同樣是1920*1080顆像素，以前要放在寬大的顯示器中，現(xiàn)在都可以放在手機(jī)屏幕上了。原本高度為12個(gè)設(shè)備像素的字體，現(xiàn)在高度為24個(gè)設(shè)備像素才能得到相近的大小（這也說明字變得更加清晰銳利了），如果應(yīng)用程序直接使用設(shè)備像素，那么編寫應(yīng)用程序?qū)⒆兊梅浅＠щy：字體在一些屏幕上高度為12個(gè)設(shè)備像素，在另一些屏幕上卻要變?yōu)?4個(gè)設(shè)備像素。
因此操作系統(tǒng)定義了一個(gè)單位：設(shè)備獨(dú)立像素。操作系統(tǒng)保證：用設(shè)備獨(dú)立像素定義的尺寸，不管屏幕的參數(shù)如何，都能以合適的大小顯示（這也是設(shè)備獨(dú)立像素名字的由來）。操作系統(tǒng)是如何做到的呢？對于那些像素密度高的屏幕，將多個(gè)設(shè)備像素劃分為一個(gè)邏輯像素。至于將多少設(shè)備像素劃分為一個(gè)邏輯像素，這由操作系統(tǒng)決定。
對于上面的例子：“原本高度為12個(gè)設(shè)備像素的字體，現(xiàn)在高度為24個(gè)設(shè)備像素才能得到相同的大小”，操作系統(tǒng)會將一個(gè)邏輯像素定義為2*2個(gè)真實(shí)像素，從而設(shè)備獨(dú)立像素尺寸不需要改變，而且不管在新、舊設(shè)備上，顯示的尺寸大致相同。

設(shè)備獨(dú)立像素與設(shè)備像素之間的比例是多少，顯示器廠商和操作系統(tǒng)廠商會通過調(diào)查研究來得出最利于觀看的比例。普遍規(guī)律是，屏幕的像素密度越高，就需要更多的設(shè)備像素來顯示一個(gè)設(shè)備獨(dú)立像素。

通過screen.width/height得到的數(shù)值就是整個(gè)屏幕（不僅僅是瀏覽器的區(qū)域）的寬度和高度（單位：設(shè)備獨(dú)立像素）。這個(gè)數(shù)值不隨頁面縮放、瀏覽器窗口大小而改變。

邏輯分辨率用屏幕的寬*高來表示（單位：設(shè)備獨(dú)立像素）。

你可以通過操作系統(tǒng)的分辨率設(shè)置來改變設(shè)備獨(dú)立像素的大小，但在前端開發(fā)的時(shí)候我們完全可以將它們當(dāng)作定值。（沒人會閑著無聊頻繁改變操作系統(tǒng)分辨率）

我屏幕的設(shè)備分辨率是1920*1200（單位：設(shè)備像素），當(dāng)前的分辨率設(shè)置下邏輯分辨率是1280*800（單位：設(shè)備獨(dú)立像素）。從圖中可以驗(yàn)證，橫、縱方向的設(shè)備像素?cái)?shù)量恰好是設(shè)備獨(dú)立像素的1.5倍。這也意味著，設(shè)備獨(dú)立像素的邊長是設(shè)備像素邊長的1.5倍。

window.devicePixelRatio在下文會解釋。

在CSS中使用的px都是指css像素，比如width: 128px。css像素的大小是很容易變化的。當(dāng)我們縮放頁面的時(shí)候，元素的css像素?cái)?shù)量不會改變，改變的只是每個(gè)css像素的大小。也就是說width: 128px的元素在縮放200%以后，寬度依然是128個(gè)css像素，只不過每個(gè)css像素的寬度和高度變?yōu)樵瓉淼膬杀丁Ｈ绻驹貙挾葹?28個(gè)設(shè)備獨(dú)立像素，那么縮放200%以后元素寬度為256個(gè)設(shè)備獨(dú)立像素（css像素寬度始終是128）。

開發(fā)者在開發(fā)的時(shí)候基本上只用考慮css像素，在這里介紹設(shè)備像素和設(shè)備獨(dú)立像素只是為了講述頁面縮放的原理，以及方便以后理解viewport。

縮放比例就是css像素邊長/設(shè)備獨(dú)立像素邊長。
根據(jù)縮放比例和設(shè)備獨(dú)立像素邊長，就能計(jì)算出css像素邊長。
在縮放比例為100%的情況下，一個(gè)css像素大小等于一個(gè)設(shè)備獨(dú)立像素。

window.devicePixelRatio設(shè)備像素比。
devicePixelRatio = CSS像素邊長/設(shè)備像素邊長。比如devicePixelRatio=2，表示CSS像素的邊長是設(shè)備像素的2倍，因此在相同長度的直線上，設(shè)備像素的數(shù)量是CSS像素?cái)?shù)量的2倍，需要4個(gè)設(shè)備像素來顯示1個(gè)CSS像素。

在桌面瀏覽器上，縮放會導(dǎo)致CSS像素邊長的改變，從而導(dǎo)致window.devicePixelRatio的改變！

但是！當(dāng)移動(dòng)端瀏覽器加入討論時(shí)，事情就變得復(fù)雜了一些。事實(shí)上，桌面瀏覽器與移動(dòng)端瀏覽器的縮放機(jī)制是不一樣的！桌面瀏覽器的是page zoom，移動(dòng)端瀏覽器的是pinch zoom。
根據(jù)CSS標(biāo)準(zhǔn)，計(jì)算window.devicePixelRatio時(shí)，不考慮pinch zoom對CSS像素尺寸的影響。因此，在移動(dòng)端縮放不會造成window.devicePixelRatio的改變。通過chrome的遠(yuǎn)程調(diào)試就能測試出這一點(diǎn)。

以上2張圖展示了我在移動(dòng)端瀏覽器上縮放前后，分別獲取到的devicePixelRatio值，可以看出它不受縮放的影響。

page zoom和pinch zoom的主要區(qū)別是，前者會造成layout viewport的尺寸（以CSS像素為單位）改變而后者不會。
為什么要弄兩套縮放機(jī)制？這是因?yàn)椋?strong>在桌面端放大時(shí)，用戶不希望出現(xiàn)橫向滾動(dòng)條，因此需要將layout viewport（網(wǎng)頁布局寬度）始終保持與visual viewport（瀏覽器窗口可視寬度）相等。在縮放時(shí)，它們的物理尺寸是不變的（比如，以厘米為單位或者以設(shè)備像素為單位），但是CSS像素的尺寸會隨著縮放變大，結(jié)果就是網(wǎng)頁的layout/visual viewport（以CSS像素為單位）變小了（一行只能顯示更少的字）。而在移動(dòng)端，手機(jī)的屏幕非常窄，如果使用同樣的機(jī)制，用戶一放大，網(wǎng)頁的layout viewport變小（比如小到只有200CSS像素），布局就會非常惡心。因此，在移動(dòng)端放大時(shí)，瀏覽器不再干涉layout viewport，讓它隨著CSS像素一起“膨脹”，layout viewport的寬度（以CSS像素為單位）不變，但是visual viewport的寬度（以CSS像素為單位）變小，因此會出現(xiàn)橫向滾動(dòng)條。（你會發(fā)現(xiàn)，在手機(jī)上放大網(wǎng)頁，一行能夠顯示的字的數(shù)量不變，只不過需要橫向滾動(dòng)才能看完一整行）
ppk大神在他的文章中也解釋了page zoom和pinch zoom。

另外請注意，改變操作系統(tǒng)分辨率會導(dǎo)致設(shè)備獨(dú)立像素邊長改變，從而導(dǎo)致CSS像素邊長改變（前面已經(jīng)說過，CSS像素邊長是根據(jù)縮放比例和設(shè)備獨(dú)立像素計(jì)算出來的），從而導(dǎo)致window.devicePixelRatio的改變！網(wǎng)上很多文章不區(qū)分設(shè)備獨(dú)立像素和設(shè)備像素，那樣就無法解釋這個(gè)現(xiàn)象。

我的屏幕寬度是1280個(gè)設(shè)備獨(dú)立像素。這個(gè)值可以直接通過window.screen.width獲得，或者自己根據(jù)操作系統(tǒng)的縮放比例和顯示器物理像素寬度來計(jì)算。我將div寬度也設(shè)為了1280px（css像素），當(dāng)縮放為100%的時(shí)候，DIV恰好撐滿整個(gè)屏幕，不會出現(xiàn)橫向滾動(dòng)條。（這說明縮放比例為100%的時(shí)候一個(gè)CSS像素完全等于一個(gè)設(shè)備獨(dú)立像素。）

這里有一個(gè)小坑點(diǎn)。如果縱向滾動(dòng)條存在的話，它會占據(jù)一點(diǎn)點(diǎn)寬度，這時(shí)如果我還將元素寬度設(shè)為屏幕寬度1280px，屏幕就無法裝下整個(gè)元素，然后就會出現(xiàn)橫向滾動(dòng)條。
在上面這個(gè)例子中因?yàn)榭v向滾動(dòng)條不存在，所以沒有這個(gè)問題，將來在開發(fā)的時(shí)候要注意。
注意到我設(shè)置了5px的橙色邊框，為什么最終的寬度不是1280+5+5=1290呢？因?yàn)槲医o所有元素加上了box-sizing: border-box的樣式，這樣我設(shè)置的邊框?qū)挾染蜁趙idth中，也就是最終加上邊框以后寬度為1280px。

當(dāng)我縮小瀏覽器窗口的時(shí)候滾動(dòng)條出現(xiàn)了。因?yàn)閐iv的寬度沒有改變，無論以什么單位衡量（設(shè)備像素、設(shè)備獨(dú)立像素還是CSS像素）。

因?yàn)榭s放依然是100%，css像素邊長/設(shè)備獨(dú)立像素邊長依然是1：1。

將窗口最大化，并通過Ctrl+鼠標(biāo)滾輪將瀏覽器縮放調(diào)整為200%，屏幕只能顯示DIV的左半部分了，這時(shí)DIV的寬度依然是1280個(gè)css像素，但是它寬度變成了2560個(gè)設(shè)備獨(dú)立像素。

以下是測試用的簡單代碼，大家可以自己在Chrome中試試！

  
  
  
  



  
this is box
 1
    
 2
    
 3
    
 4
    
 5
    
 6
    
 7
    
 8
    
 9
    
 10
    

  

A tale of two viewports — part one

A pixel is not a pixel - MDN

歡迎閱讀下一篇文章：initial containing block、viewport以及相關(guān)尺寸，它使用這篇文章介紹的3個(gè)概念，來解釋響應(yīng)式布局中有關(guān)的概念和屬性。