px and dp (containing a large number of pixels per unit Detailed)

1 Introduction:

What reading this article you'll learn:

dp(device pixels)
px(css pixels)
pt(point)
ppi(pixels per inch)
dpi(dots per inch)
dpr(device pixels ratio)
dip(device independent pixel)

What are the basics of reading this paper, you need to know:

1in (inch) == 2.5399999961392cm
Often with 1 inch equals 2.54 cm
1m == 3 feet
== 1 foot 10 inches
1 inch == 3.33333333cm
iphone6 4.7-inch screen means that the screen diagonal length of 4.7 inches
Iphone6 aspect ratio of iphone6_height: iphone6_width = 16: 9

2, dp (device pixel)

2.1 Description

dp是设备像素，也叫物理像素，顾名思义，他就是指一个物理发光点的单位。
iphone6官方在产品说明书上写的屏幕分辨率为1334x750像素指的是物理分辨率。
也就是高1334dp，宽750dp。

3, px (logical pixel)

3.1 Description:

px是逻辑像素，逻辑像素是相对的单位。
在每个设备上对应的dp是不一样的是不一样的，在相同设备上对应的dp也可以不同。
这就是为什么我我们的图片可以放大缩小的原因。

4, pt (points)

4.1 Description

pt是专用的印刷单位“点”，这个单位是绝对单位.
1pt == 1/72in

5, ppi (pixels per inch)

5.1 Description

ppi指的是单位英寸长度上的平均孔数
iphone6官方在产品说明书上写像素密度为326ppi，指的就是在它的1in == 326dp

5.2, calculate the pixel density iphone6

First through iphone6 4.7in diagonal and the aspect ratio can be calculated from the height and width:
iphone6_width = 2.304227826273027in = 2.3in
iphone6_height = 4.096405024485382in = 4.1in

And then this can be calculated by ppi wide screen and high resolution physical
iphone6_width_ppi = 750dp / 2.3in = 326.0869565217391ppi
iphone6_height_ppi = 1334dp / 4.1in = 325.3658536585366ppi

Can be drawn width and height are very approximately equal to the 326dp

6, dpi (dots per inch)

6.1 Description

dpi是输出设备的物理能力
例如：300DPI的油墨打印机是指每英寸有300墨滴用于打印机，每英吋能印出的点的数目为300。
“像素”（p）只存在于计算机显示领域，而“点”（d）只出现于打印或印刷领域。

6.2, Note

在显示器中ppi和dpi是同一概念

7、dpr(devicePixelRatio)

7,1 Description

window.devicePixelRatio是设备上物理像素和逻辑像素的比例。
dpr不是单位，是一个属性，在浏览器中通过 window.devicePixelRatio 获取屏幕的DPR。
在用微信开发者工具开发小程序的时候，在切换模拟器的时候可以看到各个设备的dpr，iphone6的设备dpr为2

8, dip (device independent pixel)

8,1 Description

是由谷歌推出用来适配各个安卓屏幕差异的。
在定义UI布局时，应该使用一个虚拟像素单元，以一种密度独立的方式表示布局维度或位置。
密度无关的像素相当于一个物理像素在160 dpi屏幕上，这是系统为“中等”密度屏幕所假设的基线密度。
在运行时，系统会根据实际的屏幕密度，透明地处理dp单元的任何扩展。将dp单元转换为屏幕像素很简单：px=dp（dpi/160）。
例如，在240 dpi屏幕上，1 dp等于1。5物理像素。在定义应用程序的UI时，应该始终使用dp单元，以确保在具有不同密度的屏幕上正确显示UI。
就是说在160dpi的屏幕上，1dip=1px。
它跟屏幕密度有关，如果屏幕密度大，1dip代表的px就多，比如在320dpi的屏幕上，1dip=2px。

9, Eggs

9.1、viewport

viewport是用户网页的可是窗口。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

9.2, example code

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Meaning specific values can refer to what I wrote before you absolutely do not know the head tag