物理像素、CSS像素、dip、dpr、ppi、dpi

物理像素(physical pixel)

物理像素又被称为设备像素（dp），他是显示设备中一个最微小的物理部件。一个设备的物理像素是固定不变的。每个像素可以根据操作系统设置自己的颜色和亮度。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。

CSS像素

CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。CSS像素顾名思义就是我们写CSS时所用的像素。

dip（Device Independent Pixels）

设备独立像素(又称设备无关像素 Device Independent Pixels），可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。
dpr（device pixel ratio）
设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：

设备像素比 (dpr)＝ 物理像素(dp) / 设备独立像素(dip)

在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。

viewport中的scale和dpr是倒数关系。获取当前设备的dpr： JavaScript:
window.devicePixelRatio。 CSS: -webkit-device-pixel-ratio,
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio。不同dpr的设备，可根据此做一些样式适配(这里只针对webkit内核的浏览器和webview)。

ppi(pixel per inch)

屏幕像素密度(ppi)是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

屏幕像素密度(ppi) = 对角线分辨率 / 对角线尺寸

dpi(Dots Per Inch)

DPI（Dots Per Inch，每英寸点数）是一个量度单位，用于点阵数码影像，指每一英寸长度中，取样、可显示或输出点的数目。
DPI是打印机、鼠标等设备分辨率的度量单位。

参考：
https://segmentfault.com/a/1190000008767416
https://www.cnblogs.com/jiangzilong/p/6700023.html
https://www.aliyun.com/jiaocheng/992769.html