设备像素、css像素、设备独立像素、dpr、ppi之间的区别？

基本概念

设备像素(device pixel, dp)

• 又称为物理像素。
• -指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，设备像素的特点就是大小固定，不可变。比如 iPhone 5 的分辨率为 640 x 1136px。
• 这个单位用px表示，它是一个[相对绝对单位]
  • 即在同样一个设备上，每1个设备像素所代表的物理长度(如英寸)是固定不变的(即设备像素的绝对性);
  • 但在不同的设备之间，每1个设备像素所代表的物理长度(如英寸)是可以变化的(即设备像素的相对性);
• 我们所说的设备分辨率的单位就是设备像素。
• 有了设备像素概念，我们就可以解释下表中：不同英寸大小的移动设备上，分辨率却相同的原因了————因为设备像素的相对性

CSS像素(css pixel, px):

• 又称为虚拟像素，也可以理解为直觉像素。

• CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的逻辑像素。

• 在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位，相对的是前面所说的设备像素(device pixel)。比如 iPhone 5 的 CSS 像素数为 320 x 568px.

• css中的1px并不是总代表设备像素上的1px，尤其是在移动设备上。

• CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。它是一个[纯相对单位]

  • 在同样一个设备上，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第一方面的相对性);
  • 在不同的设备之间，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第二方面的相对性);

• 它相对的，是 viewing device 的分辨率。这个 viewing device，通常就是电脑显示器。典型的电脑显示器的分辨率是96DPI，也就是1像素为1/96英寸（实际上，假设我们的显示器分辨率都与物理分辨率一致，而液晶点距其实是0.25mm到0.29mm之间，所以不太可能是正好1/96英寸，而只是接近）。

• 按照 CSS 规范的定义，CSS 中的 px 是一个相对长度一般来说，px 就是对应设备的物理像素，然而如果输出设备的解析度与电脑显示器大不相同，输出效果就会有问题。
  例如打印机输出到纸张上，其解析度比电脑屏幕要高许多，如果不缩放，直接使用设备的物理像素，那电脑上的照片由 600DPI 的打印机打出来就比用显示器看小了约6倍。

• 由于不同的物理设备的物理像素的大小是不一样的，所以 CSS 认为浏览器应该对 CSS 中的像素进行调节，使得浏览器中 1个 CSS 像素的大小在不同物理设备上看上去大小总是差不多，目的是为了保证阅读体验的一致。
  为了达到这一点，浏览器可以直接按照设备的物理像素大小进行换算，而 CSS 规范中使用参考像素来进行换算。

• 一个参考像素即为从一臂之遥看解析度为 96DPI 的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。
  它并不是1/96英寸长度，而是从一臂之遥的距离处看解析度为 96DPI 的设备输出一单位（即1/96英寸）时视线与水平线的夹角。
  通常认为常人臂长为28英寸，所以它的视角是: (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。如下图是一个示意图：

• 对于人来说，眼睛看到的大小取决于可视角度。
  而可视角度取决于物体的实际大小以及物体与眼睛的距离。
  10米远处一个1米见方的东西，与1米远处的10厘米见方的东西，看上去的大小差不多是一样的，所谓一叶障目不见泰山，讲的就是这个常识。

• 左边的屏幕（可以认为是电脑屏幕）的典型视觉距离是71厘米即28英寸，其1px对应了0.28mm；而右边的屏幕（可以认为是你的42寸高清电视）的典型视觉距离是3.5米即120英寸，其1px对应1.3mm。42寸的1080p电视，分辨率是1920*1080，则其物理像素只有0.5mm左右。

综上，px 是一个相对单位，而且在特定设备上总是一个近似值（原则是尽量接近参考像素）。

CSS中的1px（CSS像素 可变）!== 设备的1px（设备像素 不可变）。

影响像素的那些因素

注意：目前PPI(主要是iOS)和DPI(比如在Android中)都会用在计算机显示设备的参数描述中，并且二者的意思是一样的，都是代表像屏幕素密度

每英寸像素(pixel per inch, ppi/PPI)

每英寸像素(pixel per inch, ppi/PPI): 它表示的是每英寸所拥有的像素(pixel)数目，更确切的说法应该是像素密度，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。数值越高，代表显示屏能够以越高的密度显示图像。

• DPI(dots per inch 每英寸点数)为打印机每英寸可以喷的墨汁点数，用于印刷行业中度量空间点的密度
• PPI(pixels per inch 像素每英寸)为屏幕每英寸的像素数量(即在一个对角线长度为1英寸的正方形内所拥有的像素数)，用于度量计算机显示屏上像素的密度
• 目前PPI(主要是iOS)和DPI(比如在Android中)都会用在计算机显示设备的参数描述中，并且二者的意思是一样的，都是代表像屏幕素密度

屏幕像素密度，屏幕分辨率，屏幕尺寸三者的关系如下：
$PPI=\frac{\sqrt{横{向}^2+纵{向}^2}}{屏幕尺寸}$

设备像素比(device pixel ratio, dpr/DPR)

• 它描述的是未缩放状态下，设备像素和 CSS 像素的初始比例关系，也可以解释为默认缩放比例。-
• 通俗来说，它是指在开发中1个 CSS 像素占用多少设备像素，如 dpr=2 代表1个 CSS 像素用2x2个设备像素来绘制，所以，可以理解为 1px由多少个设备像素组成
• 官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。

DPR(设备像素比)与PPI(每英寸像素)的关系

DPR与PPI的关系如下：
DPR = PPI/160

设备像素与CSS像素之间的关系

• 获得设备像素比（dpr）后，便可得知设备像素与CSS像素之间的比例。
• 当这个比率为1:1时，使用1个设备像素显示1个CSS像素。
• 当这个比率为2:1时，使用4个设备像素显示1个CSS像素，
• 当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。

所以，有如下公式：
DPR = 设备像素/CSS像素

设备独立像素(Device independent Pixel, DIP)

• 也称为逻辑像素，简称 DIP，单位 pt。
• pt 在 css 单位中属于真正的绝对单位，1pt = 1/72(inch), inch及英寸，而1英寸等于2.54厘米。
• CSS像素 =设备独立像素 = 逻辑像素

viewport

• Viewport就是移动设备浏览器上(也可能是一个app中的webview)用来显示网页的一块“画布”。
• 移动设备上的页面是显示在Viewport上的。
• 移动设备的浏览器都有viewport元标签，而引入viewport的目的就是用于解决PC页面能在手机上正常显示，不会因屏幕变小而挤压布局导致页面排版混乱的问题。
• 在引入了Viewport概念并做如下规定后，就不会破坏那些没有针对手机浏览器优化的PC网页的布局，用户可以通过平移和缩放来看网页的其他部分。
• 移动设备上有三个viewport：layout viewport（布局视口） 、 visual viewport（视觉视口） 和 ideal viewport（理想视口）。

关系总结：

无缩放情况下，1个CSS像素等于1个设备独立像素

设备像素由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变

PC端中，1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下）

在移动端中，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素

设备像素比（dpr） = 设备像素 / 设备独立像素

每英寸像素（ppi），值越大，图像越清晰

• DPR（设备像素比） = 设备像素 / CSS像素 = 屏幕横向设备像素 / 理想视口的宽= 设备像素 / 设备独立像素 ~= PPI/160 = 页面缩放比例
• CSS像素 = 设备独立像素 = 逻辑像素（设备独立像素(DIP)）
• 设备像素是设备分辨率的单位，同一个设备的设备像素大小固定不变
• visual viewport width（视觉视口宽度） = ideal viewport width（理想视口宽度） / zoom factor（缩放因子）（其中，同一个设备的ideal viewport（理想视口）的宽度固定不变，因此缩放页面只是改变visual viewport的大小）
• CSS像素 = 设备独立像素 = 逻辑像素
• 同一个设备的CSS像素数字大小不变，但每CSS像素代表的长度会变，即CSS像素会伸缩
• 现代浏览器中实现缩放的方式都是「拉伸」像素：即每CSS像素单位代表的长度发生变化，而像素总数字不变。所以缩放会引起CSS像素的变化。
• 进行缩放时，visual viewport的尺寸会发生变化，layout viewport的尺寸保持不变
• 移动设备上的layout viewport的尺寸都大等于其浏览器的可视区域(visual viewport)
• css中的1px并不是代表设备像素上的1px
• 移动设备分辨率越大，css中1px代表的物理像素就会越多，devicePixelRatio的值也越大
• ideal viewport的宽度等于移动设备的屏幕宽度(这个理想的宽度是指以CSS像素单位计算的宽度，即屏幕的逻辑像素宽度)，跟设备的物理宽度没有关系。同一个设备的ideal viewport的宽度固定不变。

参考文献：https://hijiangtao.github.io/2017/07/09/Device-Viewport-and-Pixel-Introduction/