了解Window.devicePixelRatio（设备像素比）

记录一下Window.devicePixelRatio这个特性。

介绍：Window.devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例：即一个CSS像素的大小相对于一个物理像素的大小的比值。

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关

当页面设置了<meta name="viewport" content="width=device-width">时候，document.documentElement.clientWidth在大部分浏览器下，得到的是布局视区的宽度，等同于dips的宽度。

所以，设备独立像素等同于css像素分辨率，也就是说，我们在编写css的时候，需要按照设备独立像素编写。

获得当前设备的设备相比：

alert(window.devicePixelRatio);

作用：

1.我们可以通过设置window.devicePixelRatio的值来实现清晰的网页显示

2.为了更好的提升用户体验，节省移动端的流量，针对不同的显示屏，我们可以采取不用的方案，保证图片在不同显示屏幕下正常展现，通过判断 devicePixelRatio 的值就可以区分普通显示屏和高清屏，然后加载不同尺寸的图片

后面用到的话，会继续更新。

参考文章：

设备像素比devicePixelRatio简单介绍

web移动端，需要清楚设备像素比devicePixelRatio的应用

Window.devicePixelRatio