在前端開發中，DPR（Device Pixel Ratio，裝置畫素比）和 DPI（Dots Per Inch，每英寸畫素點數）經常被混淆，但它們是不同的概念，儘管它們之間存在聯絡。
DPI (Dots Per Inch):
- 指的是物理螢幕上每英寸可以顯示的畫素點數量。這是一個物理屬性，由螢幕硬體決定，一旦螢幕生產出來就固定不變。
- DPI 值越高，螢幕在相同物理尺寸下可以顯示更多的畫素，影像也就越清晰細膩。
- 例如，一臺 27 英寸的顯示器，解析度為 2560x1440，它的 DPI 大約為 109。
DPR (Device Pixel Ratio):
- 指的是一個 CSS 畫素對應多少個物理畫素。這是一個比例值，表示邏輯畫素與物理畫素之間的對映關係。
- DPR 的出現是為了解決高解析度螢幕（例如 Retina 螢幕）上網頁顯示模糊的問題。在高解析度螢幕上，如果仍然按照 1:1 的比例渲染網頁，那麼影像和文字就會顯得模糊，因為物理畫素密度更高了。為了解決這個問題，瀏覽器引入了 DPR 的概念，透過縮放網頁元素來適應高解析度螢幕。
- 例如，一個 DPR 為 2 的裝置意味著一個 CSS 畫素對應兩個物理畫素。這意味著瀏覽器會將網頁放大兩倍渲染，以匹配更高的畫素密度。
- 常見的 DPR 值有 1、1.5、2、3 等。
兩者的關係:
DPR 和 DPI 之間存在間接關係，但它們並非直接相等。DPR 是由作業系統根據螢幕的 DPI 和尺寸計算得出的。作業系統會根據 DPI 值來判斷螢幕是否為高解析度螢幕，並據此設定合適的 DPR 值，以保證網頁內容的清晰度。
在前端開發中的應用:
- 圖片適配: 為了避免在高 DPR 螢幕上圖片模糊，需要提供多倍圖。例如，對於一張 100x100 px 的圖片，需要提供 200x200 px (@2x) 和 300x300 px (@3x) 的版本，供不同 DPR 的裝置使用。可以使用
<picture>元素和srcset屬性來實現。 - 媒體查詢: 可以使用媒體查詢
-webkit-min-device-pixel-ratio或min-resolution來針對不同 DPR 的裝置應用不同的樣式。 - JavaScript 獲取 DPR: 可以使用
window.devicePixelRatio獲取當前裝置的 DPR 值。
總結:
DPI 是螢幕的物理屬性，DPR 是瀏覽器為了適配高解析度螢幕而引入的一個比例值。前端開發者需要理解 DPR 的概念，並使用合適的技術來適配不同 DPR 的裝置，以確保網頁在各種裝置上都能清晰地顯示。