标签：作用   大小   window   src   span   之间   设备   idt   问题：   

设备像素比（devicePixelRatio,dpr）

定义

window.devicePixelRatio是设备物理像素和设备独立像素（device-independent pixels，dips）之间的比率。window.devicePixelRatio = 物理像素/ 设备独立像素

• 设备物理像素：
  是一个物理概念，比如设备的分辨率，Phone 5的分辨率640 x 1136px。
• 设备独立像素dips ：
  与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素，所以前端把它当做CSS逻辑像素理解(参考理解https://www.zhihu.com/question/40506180)
• CSS像素：
  是Web编程的概念，指的是CSS中使用的逻辑像素。px是一个相对单位，相对的是设备物理像素。
  比如iPhone 5使用的是Retina屏幕，使用2px x 2px的设备物理像素，代表 1px x 1px 的 CSS像素，所以设备物理像素为640 x 1136px，而CSS逻辑像素数为320 x 568px。

上面三个概念中：

设备物理像素，其实就是物理分辨率，也就是我们常说的手机分辨率，如2048*1080就指2k屏幕，横向有2048个像素点，纵向有1080个像素点

CSS像素px是一个相对单位，一个CSS像素可以代表多个物理像素

计算设备像素比

先计算PPI，ppi （pixel per inch）：表示每英寸所包含的像素点数目，数值越高，说明屏幕能以更高密度显示图像

这个PPI是一个物理属性，就是屏幕的像素密度，屏幕上像素点越多，屏幕的尺寸越小，ppi当然越大

计算公式：

  或 

 比如已iphone5为例，X是640，Y是1136，屏幕尺寸是4，得到的PPI是326

 PPI的作用：

以上计算出ppi是为了得到密度分界，我们可以查表获得默认缩放比例，即设备像素比。上图中的缩放因子就是设备像素比

ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个高大上的名字——Retina）。

设备像素比作用：

得到设备像素比后我们就知道了我们页面CSS样式中定义的长度1px，对应着实际几个物理像素

比如：

当设备像素比为1:1时，使用1（1×1）个物理像素显示1个CSS像素；

当设备像素比为2:1时，使用4（2×2）个物理像素显示1个CSS像素；

当设备像素比为3:1时，使用9（3×3）个物理像素显示1个CSS像素。

对前端的影响

由此衍生出一个问题：当我们在屏幕像素比为1:1的时候，给页面插入了一个100px * 100px 的图片，此时图片的实际长宽都是100个像素点，占据屏幕上100 * 100个物理像素

这时候，如果这张网页要在屏幕像素比为2:1的手机上显示，比如iphone5，如果还想要相同的显示效果，那么我们就要将图片大小变成200px * 200px，此时图片的实际长宽都是200个像素点

为什么呢：

当屏幕像素比为2:1的时候‘，一个css像素对应2个物理像素，所以网页中的元素的长度占据的物理像素变为原来的两倍，

这时候我们图片是100px * 100px，占据屏幕上200 * 200个物理像素。图片看起来会变模糊，所以把图片大小变成200px * 200px，此时图片的实际长宽都是200个像素点，它占据屏幕上200 * 200个物理像素就刚刚好对应，不会模糊，显示效果和之前一样了。

设备像素比（devicePixelRatio）

标签：作用   大小   window   src   span   之间   设备   idt   问题：   

原文地址：https://www.cnblogs.com/Helen-code/p/13158453.html