devicePixelRatio 像素比

把一个像素 放大至 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的图片要大， 不然就会出现图片发虚