把一個像素 放大至 N個像素去顯示(N就是我們像素比的值)
舉個例子:
如果像素比為2
<div style="width: 10px;height: 5px;background: black"></div>
那么，我們div實際所占的物理像素為2*10
我的電腦像素比是1.25
console.log(window.devicePixelRatio);//1.25
同樣是上面的html代碼, 顯示出來截圖后再ps測量, div寬為13像素(101.25=12.5)， 高為6像素(51.25=6.25), 因為顯示最小單位就是一個像素， 所以0.5也會被當做一個像素
如果改為:
<div style="width: 100px;height: 100px;background: black"></div>
測量結果為寬為125像素, 高為125像素
像素比應該是設備屬性, 嘗試修改（沒有效果）：
window.devicePixelRatio=3
另外: 放大或縮小網頁，會改變像素比
在移動端的物理分辨率實際已經非常大了， iphone6的分辨率為(4.7英寸1334x750)
如果沒有像素比， 你的正常顯示在pc的網頁， 在移動端會非常小
移動端的像素比一般都是大于1的， iphone6的像素就是2， 所以在iphone6中window.innerWidth的值為375, 正好為物理分辨率的一半
有時我們查看screen.width屬性和我們電腦的設置的分辨率不一樣， 也是這個原因
我的電腦的分辨率設置為: 1920*1080
但是我的screen.width和screen.height為:
screen.width;//1536
screen.height;//864
因為我的devicePixelRatio像素比為1.25
1536*1.25;//1920
864*1.25;//864
注意:
在移動端, 圖片的分辨率相應要比pc的圖片要大， 不然就會出現圖片發虛
