移動端的設備多種多樣，不同的設備又有不同的分辨率，低一點的有 800 * 400，中等的有 1280 * 720，高的有 1920 * 1080，甚至還有更高的 4k 屏等。
我們在開發移動端頁面時，將視口（viewport）設置爲設備寬度（device-width）後，同一份頁面在這些不同的設備上又怎樣的表現呢？我們寫一個測試頁面，在 Chrome 中看看就知道了。
同一份頁面在不同設備上的表現
測試頁面的代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.PC 瀏覽器下的表現
PC 瀏覽器中的表現如下：
2.IPhone6 下的表現
IPhone6 下的表現如下：
3.Galaxy S5 下的表現：
Galaxy S5 下的表現如下：
可見，雖然設備不一樣，但同樣一個元素，在這些設備上寬度都是一樣的。
我們來看一下這些測試設備的分辨率：
- Chrome（也就是我們的 PC 屏幕）：1920*1080
- IPhone6：1334*750
- Galaxy S5：1280*720
爲什麼這些設備擁有不同的分辨率，而在渲染頁面時表現都一樣呢？其實這是由設備像素比造成的。
設備像素比是怎麼發揮作用的呢？要理解這個問題，需要三塊預備知識：
- 設備獨立像素
- DPI/PPI
- CSS 中的像素
下面依次來看一下這些內容。
設備獨立像素
設備的獨立像素是和設備的分辨率相關聯的，比如 IPhone6 的分辨率爲 1334 * 750，那麼表示該手機的屏幕上有 1366 * 750 個物理像素，而 Galaxy S5 的屏幕上有 1280*720 個像素。
PPI/DPI
PPI/DPI 是像素密集度，表示屏幕每英寸擁有的像素個數，PPI/DPI 的計算方式如下（以 IPhone6 爲例）：
最終計算出的 IPhone6 的 PPI 爲：325.16。該結果表示在 IPhone6 上，每英寸有 325.16 個物理像素，四捨五入爲 325 個物理像素。
可以發現：這個 PPI 的值近似等於 IPhone6 這個設備的水平物理像素的一半，也即：
750 / 325 = 2
這個由設備水平物理像素和設備 PPI/DPI 計算出來出來的比值就是設備像素比。
CSS 中的像素
CSS 中的像素是一個相對值，不是絕對值，因此1px 的 CSS 像素並不一定等於 1px 的物理像素。
需要注意的是，CSS 中的像素單位是抽象的，只是一種規範，最終的顯示是取決於物理設備的。物理設備根據某種規則，決定該採用幾個物理像素去顯示 1px 的 CSS 像素，這個規則就是設備像素比。
設備像素比
前面已經說到過，設備像素比等於設備的水平物理像素和設備 PPI 的比值。設備像素比的意義就是決定了用多少個物理像素去顯示 1px 的 CSS 像素。比如在 IPhone6 中，設備像素比爲 2，那麼在 IPhone6 上就會使用 2*2 = 4 個物理像素去顯示 1px 的 CSS 像素。
因此，如果我們給一個 DIV 元素設置 300px * 300px 的樣式，那麼其在 IPhone6 上將會佔用 600 * 600 個物理像素。這就是爲什麼明明 IPhone6 的分辨率爲 1334 * 750（物理像素），而將 DIV 元素的寬度設置成 300px 後，其幾乎佔滿了水平屏幕的原因。
上例在 IPhone 中的渲染效果也可以理解爲：在分辨率爲 667 * 325（設備寬度不變），設備像素比爲 1 的設備上顯示 300px 寬度的 DIV 的效果。既然設備像素比爲 1，那麼也可以這麼理解：上例在 IPhone6 中的顯示效果相當於在 667 * 325 的 Chrome 瀏覽器下的顯示效果。
Galaxy S5 的設備像素比爲 3，因此在 Galaxy S5 中的顯示效果可以理解爲在 660 * 360 的 Chrome 瀏覽器下的顯示效果。
這也解釋了爲什麼不同分辨率的設備，對於 300px 寬度的 DIV 展示效果基本一致的情況。
window.devicePixelRatio
window 對象有個 devicePixelRatio 屬性，其中也保存了設備像素比的值，因此我們不必經過上面的公式計算，就可以直接獲取到設備像素比的值。
注意：你可以爲這個 window.devicePixelRatio 重新賦值，但並不會對最終的顯示造成任何的影響。
window.devicePixelRatio = 10
window.devicePixelRatio // 10
上面重新設置了 window.devicePixelRatio 的值，但不會影響瀏覽器的顯示效果，也就是說，手動設置 window.devicePixelRatio 是沒有任何用處的。
總結
本文總結了設備像素比的相關概念，先從同一份頁面在不同分辨率的設備上表現一致的現象說起，引入了設備獨立像素、PPI/DIP、CSS 中的像素和設備像素比的概念。
我們需要記住一點：1px 的 CSS 像素並不一定等於 1px 的物理像素，不同的設備會根據其對應設備像素比決定使用多少個物理像素顯示 1px 的 CSS 像素。
另外，在移動端不建議使用 px 作爲佈局單位，而是應該使用 rem 或者百分比作爲佈局單位。
完。
作者：黑黢黢
鏈接：https://www.jianshu.com/p/c88e9489b583
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。