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