當我們在前端開發中涉及到devicePixelRatio時，我們實際上在談論屏幕像素密度，即每英寸的像素數。這個屬性告訴我們在一個設備上的一個CSS像素對應多少物理像素。

目錄

知識點概覽

dpr值的計算

dpr的用處

---

知識點概覽

?比如我們新買了一個手機，看一下分辨率，它所指的是設備上有多少個能夠顯示一種特定顏色的最小區域，不管打開哪個網站，這部手機的物理像素是不會變的。

dpr值的計算

那么dpr的實際意義就是，我們可以知道，每個css像素實際上，在一臺設備上，精確的說是設備的橫坐標或者縱坐標上（橫豎兩個方向），會被多少實際的物理像素來顯示。

當我們在屏幕上做縮放操作的時候，比如某些圖片需要放大一些，兩根手指執行放大操作，或者縮小一些等這些操作，很明顯設備像素和css像素就不匹配了，如果用戶執行了放大操作，那么dpr的值就會大于1。

由上可見，dpr =?設備像素 / CSS像素

dpr的用處

devicePixelRatio的值通常是一個浮點數，表示設備上的物理像素與CSS像素的比率。例如：

• devicePixelRatio為1表示每個CSS像素對應一個物理像素，通常用于標準分辨率的屏幕。
• devicePixelRatio為2表示每個CSS像素對應四個物理像素（2x2的像素矩陣），通常用于高分辨率的屏幕（Retina顯示屏等）。

在響應式網頁設計中，了解devicePixelRatio可以幫助我們提供適合不同設備屏幕密度的圖像和樣式。例如，我們可以根據devicePixelRatio選擇加載不同分辨率的圖像，以確保在高分辨率屏幕上顯示清晰度。此外，了解devicePixelRatio還可以幫助我們優化網頁性能，例如減少在高分辨率屏幕上不必要的圖形渲染，從而提高用戶體驗。

在JavaScript中，你可以通過window.devicePixelRatio來訪問devicePixelRatio屬性，從而在運行時獲取設備的像素比率。

現在許多設備，特別是高分辨率的移動設備（如智能手機、平板電腦和筆記本電腦），都具有高像素密度的屏幕。這種高像素密度意味著相同物理尺寸的屏幕上包含了更多的像素，使得顯示更加細膩和清晰。

?