裝置像素比檢查器
你的裝置像素比
—
放大或缩小（Ctrl/Cmd +/−）即可觀察比例变化。所有值都在本機读取。
使用方法
- 開啟頁面 - 您的裝置像素比在頂部顯示為一個大數字。
- 閱讀解析度詳細資訊卡，將 CSS 像素與實體像素進行比較，並查看色彩深度。
- 使用 Ctrl/Cmd 和 +/- 放大或縮小以即時觀察 DPR 變化。
常見問题
我的裝置像素比是多少？
頂部的大數字是您的裝置像素比 (DPR) — window.devicePixelRatio 的值。 DPR 為 1 表示每個 CSS 像素有一個實體像素； DPR 為 2（視網膜）表示每個 CSS 像素有 4 個物理像素。
什麼是好的設備像素比？
沒有單一的最佳價值——這取決於硬體。標準顯示器通常為 1 個，Retina 筆記型電腦和大多數手機為 2 或 3 個。較高的 DPR 意味著更清晰的文字和圖像，但資產大小也更大。
為什麼縮放時我的 DPR 會改變？
瀏覽器縮放會倍增裝置像素比，因此在 1 倍顯示器上縮放至 150% 會報告 DPR 為 1.5。這就是為什麼 DPR 在這裡即時讀取並在您縮放或在監視器之間移動視窗時更新。
DPR 如何影響影像？
在 2x 螢幕上，100×100 CSS 像素圖像需要 200×200 來源才能看起來清晰。將 DPR 與 srcset 和 x 描述符（1x、2x、3x）結合使用，以便高密度螢幕獲得清晰的資源，而無需強制低密度螢幕下載它們。
CSS 和物理解析度有什麼區別？
CSS 解析度是用於佈局的邏輯尺寸（screen.width × screen.height）。物理解析度乘以 DPR 即可得到面板渲染的實際像素網格。兩者都顯示在詳細資訊卡中。
是否有資料發送到伺服器？
不會。比率和解析度是使用標準瀏覽器 API 讀取並在本機計算的。沒有上傳任何內容。
介紹
裝置像素比檢查器回答每個前端開發人員最終都會問的問題：*我的 DPR 是什麼？ * 它會即時讀取window.devicePixelRatio並將其顯示為單一突出的數字，然後分解 CSS 解析度如何對應到面板上的實體像素。
裝置像素比是 CSS 使用的座標系和現代顯示器的密集像素網格之間的橋樑。如果處理得當，Retina MacBook 上的文字會變得清晰，而旗艦手機上的影像會變得清晰，如果處理不當，資源就會顯得模糊或過大。
什麼是設備像素比？
裝置像素比 (DPR) 是對應於單一 CSS 像素的實體裝置像素數。它在 JavaScript 中公開為window.devicePixelRatio。
| DPR | 說明 | 典型硬體 |
|---|---|---|
1 |
1 物理像素 = 1 CSS 像素 | 標準桌上型顯示器 |
2 |
每個 CSS 像素 4 個實體像素 | Retina 筆記型電腦、許多平板電腦 |
3 |
每 CSS 像素 9 個實體像素 | 高階智慧型手機 |
| Fractional | 作業系統縮放或瀏覽器縮放 | 125%/150% Windows 縮放、縮放 |
這裡的 DPR 是如何計算的
該工具會讀取 window.devicePixelRatio，以及 screen.width / screen.height 的 CSS 解析度，然後相乘估算實體解析度。由於數值會隨縮放變化，且視窗在不同密度的顯示器之間移動時也會改變，讀數會在調整大小時自動更新。
常見用例
- 響應式影像工作 — 決定您需要運送的
srcset密度（1x、2x、3x）。 - Canvas 和 WebGL — 透過 DPR 縮放繪圖緩衝區，以便渲染在 HiDPI 螢幕上不會模糊。
- QA 和錯誤報告 — 當出現「螢幕模糊」報告時記錄 DPR。
- 設計交接 — 在匯出資產前確認目標密度。
最佳實踐
- 將畫布尺寸乘以 DPR（並縮放上下文）以在高密度顯示器上呈現清晰的圖形。
- 提供
2x以及（適用於手機）3x影像來源，但避免將它們提供給1x螢幕以節省頻寬。 - 將 DPR 視為動態 — 永遠不要在載入時快取它一次；在調整大小時重新閱讀它，就像這個工具一樣。
- 對於原始視窗尺寸，請將其與viewport size checker配對；有關完整環境快照，請參閱device info。