裝置畫素比 (Device Pixel Ratio，簡稱 DPR) 指的是物理畫素和邏輯畫素的比率。它描述了在裝置螢幕上的一個 CSS 畫素代表多少個實際的物理畫素。
更具體地說：
-
物理畫素: 螢幕實際擁有的畫素點，是硬體層面的最小顯示單元。例如，一個解析度為 1920x1080 的螢幕，水平方向有 1920 個物理畫素，垂直方向有 1080 個物理畫素。
-
邏輯畫素 (也稱 CSS 畫素): 瀏覽器使用的抽象單位，用於網頁佈局和渲染。CSS 畫素並非實際的物理畫素，而是瀏覽器根據裝置畫素比進行縮放的虛擬畫素。
DPR 的出現是為了解決高解析度螢幕上的顯示問題。在早期的低解析度螢幕上，一個 CSS 畫素對應一個物理畫素 (DPR=1)。隨著高分屏 (例如 Retina 螢幕) 的普及，為了保持網頁內容的清晰度，需要在一個 CSS 畫素內渲染更多的物理畫素。例如，一個 DPR 為 2 的螢幕，一個 CSS 畫素對應 2x2 個物理畫素；一個 DPR 為 3 的螢幕，一個 CSS 畫素對應 3x3 個物理畫素。
DPR 的影響:
-
圖片清晰度: 為了在高分屏上顯示清晰的圖片，需要提供更高解析度的圖片。例如，如果一個圖片在 DPR 為 1 的螢幕上顯示大小為 100x100 畫素，那麼在 DPR 為 2 的螢幕上，需要提供 200x200 畫素的圖片，以保證相同的顯示尺寸和清晰度。
-
佈局和字型大小: DPR 會影響 CSS 畫素的大小，因此需要根據 DPR 進行調整，以確保佈局和字型大小在不同裝置上保持一致。
-
JavaScript 獲取 DPR: 可以使用
window.devicePixelRatio屬性獲取當前裝置的 DPR。
前端開發中的應用:
-
使用媒體查詢
@media (-webkit-min-device-pixel-ratio: 2)或@media (min-resolution: 192dpi)根據 DPR 載入不同解析度的圖片： 這是最常見的應用場景，透過判斷 DPR 值，載入合適的圖片資源，避免在高分屏上顯示模糊或在低分屏上浪費頻寬。 -
使用 JavaScript 獲取 DPR 並動態調整元素大小或樣式： 可以根據 DPR 動態計算元素的尺寸，以確保在不同裝置上顯示效果一致。
-
使用
<meta name="viewport" content="width=device-width, initial-scale=1">設定 viewport： 這可以確保網頁在不同裝置上的寬度與裝置寬度相匹配，並根據 DPR 進行縮放。
總而言之，理解裝置畫素比對於前端開發者至關重要，它可以幫助我們建立適應不同解析度螢幕的網頁，並提供最佳的使用者體驗。