摘要：設備像素設備分辨率設備像素也叫物理像素。從圖中可以驗證，橫縱方向的設備像素數量恰好是設備獨立像素的倍。像素與設備獨立像素的關系縮放比例就是像素邊長設備獨立像素邊長。因為的寬度沒有改變，無論以什么單位衡量設備像素設備獨立像素還是像素。

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

像素單位有設備像素、邏輯像素和CSS像素3種。

設備像素也叫物理像素。

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

設備獨立像素也叫邏輯像素。

設備獨立像素(dips)是操作系統為了方便開發者而提供的一種抽象。應用程序與操作系統之間描述長度時以設備獨立像素為單位，然后操作系統再將單位從設備獨立像素轉化為設備像素，從而控制屏幕上真正的物理像素點。

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

設備獨立像素與設備像素之間的比例是多少，顯示器廠商和操作系統廠商會通過調查研究來得出最利于觀看的比例。普遍規律是，屏幕的像素密度越高，就需要更多的設備像素來顯示一個設備獨立像素。

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

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

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

我屏幕的設備分辨率是1920*1200（單位：設備像素），當前的分辨率設置下邏輯分辨率是1280*800（單位：設備獨立像素）。從圖中可以驗證，橫、縱方向的設備像素數量恰好是設備獨立像素的1.5倍。這也意味著，設備獨立像素的邊長是設備像素邊長的1.5倍。

window.devicePixelRatio在下文會解釋。

在CSS中使用的px都是指css像素，比如width: 128px。css像素的大小是很容易變化的。當我們縮放頁面的時候，元素的css像素數量不會改變，改變的只是每個css像素的大小。也就是說width: 128px的元素在縮放200%以后，寬度依然是128個css像素，只不過每個css像素的寬度和高度變為原來的兩倍。如果原本元素寬度為128個設備獨立像素，那么縮放200%以后元素寬度為256個設備獨立像素（css像素寬度始終是128）。

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

縮放比例就是css像素邊長/設備獨立像素邊長。
根據縮放比例和設備獨立像素邊長，就能計算出css像素邊長。
在縮放比例為100%的情況下，一個css像素大小等于一個設備獨立像素。

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

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

但是！當移動端瀏覽器加入討論時，事情就變得復雜了一些。事實上，桌面瀏覽器與移動端瀏覽器的縮放機制是不一樣的！桌面瀏覽器的是page zoom，移動端瀏覽器的是pinch zoom。
根據CSS標準，計算window.devicePixelRatio時，不考慮pinch zoom對CSS像素尺寸的影響。因此，在移動端縮放不會造成window.devicePixelRatio的改變。通過chrome的遠程調試就能測試出這一點。

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

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

另外請注意，改變操作系統分辨率會導致設備獨立像素邊長改變，從而導致CSS像素邊長改變（前面已經說過，CSS像素邊長是根據縮放比例和設備獨立像素計算出來的），從而導致window.devicePixelRatio的改變！網上很多文章不區分設備獨立像素和設備像素，那樣就無法解釋這個現象。

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

這里有一個小坑點。如果縱向滾動條存在的話，它會占據一點點寬度，這時如果我還將元素寬度設為屏幕寬度1280px，屏幕就無法裝下整個元素，然后就會出現橫向滾動條。
在上面這個例子中因為縱向滾動條不存在，所以沒有這個問題，將來在開發的時候要注意。
注意到我設置了5px的橙色邊框，為什么最終的寬度不是1280+5+5=1290呢？因為我給所有元素加上了box-sizing: border-box的樣式，這樣我設置的邊框寬度就會包含在width中，也就是最終加上邊框以后寬度為1280px。

當我縮小瀏覽器窗口的時候滾動條出現了。因為div的寬度沒有改變，無論以什么單位衡量（設備像素、設備獨立像素還是CSS像素）。

因為縮放依然是100%，css像素邊長/設備獨立像素邊長依然是1：1。

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

以下是測試用的簡單代碼，大家可以自己在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以及相關尺寸，它使用這篇文章介紹的3個概念，來解釋響應式布局中有關的概念和屬性。