记录一下Window.devicePixelRatio这个特性。
介绍:Window.devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例:即一个CSS像素的大小相对于一个物理像素的大小的比值。
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是:window.devicePixelRatio = 物理像素 / dipsdip或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 的值就可以区分普通显示屏和高清屏,然后加载不同尺寸的图片
后面用到的话,会继续更新。
参考文章: