完全理解 px,dpr,dpi,dip

寫在前面

從 media query 一路摸過來，花了大把時間才弄明白這些東西的含義

設備像素

設備像素（Device Pixels）：設備屏幕的物理像素，單位是 px，比如 iPhone6 的 750x1334px

P.S. 表示屏幕上可以鋪多少個點點，而不是一個絕對長度單位（例如 in,mm），因為我的點點和你的點點大小不一樣

分辨率

分辨率（Resolution）也是一個物理概念，含義要看對誰

對於屏幕，分辨率一般表示屏幕上顯示的物理像素總和。比如，我們說 iPhone6 屏幕分辨率是 750x1334px

對於圖像，概念等同於圖像尺寸、圖像大小、像素尺寸等等。比如，我們說 20x20px 的 icon

P.S. 其實嚴格來說，圖像分辨率的單位是 ppi（Pixels Per Inch），對於一個圖片文件，其像素尺寸是一定的，可能含有來自相機的 meta 信息，比如分辨率 200ppi，該值只是個建議值，圖片顯示出來我們看到的尺寸由屏幕像素密度決定，像素密度越高，圖片看起來越小

CSS 像素

CSS 像素（CSS Pixels）：是 Web 編程的概念，指的是 CSS 樣式代碼中使用的邏輯像素

所以，1 個 CSS 像素在不同設備上可能對應不同的物理像素數，這個比值是設備的屬性（Device Pixel Ratio，設備像素比）

在 CSS 規範中，長度單位可以分為絕對單位和相對單位。px 是一個相對單位，相對的是設備像素（Device Pixels）。比如 iPhone5 使用的是 Retina 視網膜屏幕，用 2x2 的 Device Pixel 代表 1x1 的 CSS Pixel，所以設備像素數為 640x1136px，而 CSS 邏輯像素數為 320x568px

設備像素比

設備像素比縮寫為 DPR 或 DPPX，如下：

Device Pixel Ratio: Number of device pixels per CSS Pixel
Dots Per Pixel: the amount of device pixels per CSS pixel (e.g. in Retina displays this will be 2).

一般我們說 DPR，wiki 定義：

Device pixel ratio, the ratio between physical pixels and logical pixels used by cascading style sheets (CSS): other names for it are "CSS Pixel Ratio" and "dppx"

所以，設備像素比表示 1 個 CSS 像素（寬度）等於幾個物理像素（寬度）：

DPR = 物理像素數 / 邏輯像素數

比如 dpr=2 時，1 個 CSS 像素由 4 個物理像素點組成，見上面對 CSS 像素的解釋

P.S. DPR 不是單位，而是一個屬性名，比如在瀏覽器中通過 window.devicePixelRatio 獲取屏幕的 DPR

特別注意：zxx 的說法：

window.devicePixelRatio 是設備上物理像素和設備獨立像素 (device-independent pixels (dips)) 的比例。

公式表示就是：window.devicePixelRatio = 物理像素 / dips

這裡的「設備獨立像素」，指的就是邏輯像素，即 CSS 像素，也是一個屬性名，不要和 Android 的單位 dip/dp 弄混了，二者沒有任何關係，雖然英文一樣，含義也差不多，但那是 Android 自家的事情，不通用

像素密度

像素密度也叫顯示密度或者屏幕密度，縮寫為 DPI(Dots Per Inch) 或者 PPI(Pixel Per Inch)，含義相同

專業的一般說 PPI，細微差異如下：

ppi 和 dpi（每英寸點數）。從技術角度說，「像素」（p）只存在於計算機顯示領域，而「點」（d）只出現於打印或印刷領域。

經常看到相同尺寸的屏幕像素尺寸卻不同，也就是 DPI 的差異，比如 4.7 英寸的 iPhone6 像素尺寸為 750x1334px，而 4.7 英寸的 HTC One 像素尺寸為 1080x1920px

像素密度很容易算出來，比如 iPhone6 的：

// 屏幕對角線的像素尺寸 / 物理尺寸（inch）
Math.sqrt(750*750 + 1334*1334) / 4.7 = 326ppi

生活案例：

Windows 設置分辨率修改的應該是~~像素密度~~（像素密度是一個屬性，固定不變，因為屏幕物理像素尺寸和物理尺寸都是固定的）設備像素比，所以同一張圖片在不同分辨率設備上的顯示尺寸不同，像素設備像素比越低，邏輯分辨率越高（dpr=1 時邏輯分辨率=物理分辨率），圖片顯示尺寸越小（用尺子量屏幕），比如 Windows 1920x1080 分辨率下桌面圖標/字體都比 1366x768 下要小些。而圖片瀏覽工具能放大一張圖片，實際上是通過軟件插值模擬像素數據增加了寬高像素數量，所以放很大時會不清晰（失真），縮小也存在這樣的問題

在輸出的最後時刻：比如顯示、或打印、或沖印時的 DPI 設置，才是最後決定輸出尺寸大小的關鍵設置，機身形成文件所標示的什麼 180DPI 或 72DPI 都只是一種設定好的臨時參數。所以洗照片可以有寸照、2 寸照等等

相機中 EXIF 顯示的 DPI 或者 photoshop 中顯示的 DPI 只是相機隨便假設你的最終輸出的對象的一個數據，因為相機和 PS 都不知道你最終用的打印機是什麼 DPI，也不知道你是不是就是為了放在網絡上，所以就隨便假設了一個數，其實沒有任何意義

設備獨立像素

一般指 Google 提出的用來適配 Android 海量奇怪屏幕的，Windows 也有這個概念，但含義不同，IOS 好像沒有設備獨立像素一說

設備獨立像素作為單位，一般是指 Android 開發中的東西，縮寫為 DIP(Device Independent Pixels) 或者 DP(Density-independent Pixels)，含義完全一致

Android 設備的特點是屏幕尺寸很多，因此為了顯示能盡量和設備無關，提出了 dip，參照的 density 是 160。計算公式為：

// 當屏幕密度為 160（單位是 ppi 或者 dpi，一個意思）時，px === dip
px = dip * density / 160 
// 所以
dip = px * 160 / dpi

當然，則兩個式子都只適用於 Android 設備，這個 dip拿到其它地方去沒什麼意義

視口（viewport）

桌面上視口寬度等於瀏覽器寬度，但在手機上有所不同。

佈局視口

手機上為了容納為桌面瀏覽器設計的網站，默認佈局視口寬度遠大於屏幕寬度，為了讓用戶看到網站全貌，它會縮小網站
視覺視口

屏幕的可視區域，即物理像素尺寸
理想視口

當網站是為手機準備的時候使用。通過 meta 來聲明。早期 iPhone 理想視口為 320x480px

所以，在沒有縮放的情況下，屏幕的 CSS 像素寬度其實是指理想視口的寬度，而 meta 標籤：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

指定了佈局視口=理想視口，並且禁止縮放。所以添上 width=device-width 的 viewport meta 後頁面變大了（一開始頁面內容小得看不清），實際上是佈局視口變小了