浅谈dp px ppi dpr dpi

dpi ：（Dots Per Inch），指每英寸的像素，是衡量打印机打印精度的主要参数之一

ppi：PPI(Pixel Per Inch)表示数字影像的解析度（也许这样太过于抽象，dpi=ppi）

px：像素单位。最基础的图像构成元素单位，css pixel 逻辑像素，浏览器使用的单位

dp pt：device independent pixel 设备无关像素或物理像素

dpr：devicepixelRatio 设备像素缩放比

分辨率：例如 640*1136 就是说我的屏幕宽度有 640个像素点，高度有 1136 个像素点。

ppi：

ppi越高像素数越高 图像越清晰

但可视度越低（小）系统默认缩放比就越大

用物理像素计算

就iphone5物理像素：640dp*1136dp 4英寸

其ppi=326

dpr：

根据上面计算的ppi，对照下面的表得到iphone5的dpr为2

ppi

默认缩放比

ldpimdpihdpixhdpi1201602403200.751.01.52.0


获取方式：

你可以通过JavaScript 中的window.devicePixelRatio来获取设备中的像素比值。

px：

平面上：1px=（dpr)^2*dp

纬度上：1px=dpr*dp

物理像素：640dp*1136dp

逻辑像素：320px*568px

注意：

这里通过1px=（dpr)^2*dp或者1px=dpr*dp 

来计算px的时候不要用数学的思想来想这个公式，我刚开始就觉得逻辑像素应该是（640*2）*（1136*2）来计算最后得到

逻辑像素是1280px*2272px

后来终于明白

这里应该理解的是，1px代表2dp，也就是说1dp只能渲染1/2个px，这里就宽来说，640dp可以渲染多少个像素呢？就是320px了，高也是一样，就是568px

我个人觉得这里的公式写成：

平面：1px=dp/（dpr)^2

纬度：1px=dp/dpr

更好理解一点

1. devicePixelRatio在大多数浏览器是值得信赖的。
2. 在iOS设备，screen.width乘以devicePixelRatio得到的是物理像素值。
3. 在Android以及Windows Phone设备，screen.width除以devicePixelRatio得到的是设备独立像素(dips)值

补充：

1.就iphone6 plus的分辨率比iphone5的分辨率高，但是，为什么iphone5的字看上去更大些呢（这里px是一样的数值）

我个人之前就1px=（dpr)^2*dp

可能还是不太理解

就这个例子，我分析下自己对上式的真正的理解

px                     dp

5 21

6plus            3 1

也就是说：5：   px与dp的比是  2：1

    6:     3:1

但是在物理像素恒定情况在不使用viewport时，要在手机上展示的话就需要压缩，那么字就变小了