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