浅谈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 默认缩放比 |
ldpi | mdpi | hdpi | xhdpi |
120 | 160 | 240 | 320 | |
0.75 | 1.0 | 1.5 |
2.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
更好理解一点
-
devicePixelRatio
在大多数浏览器是值得信赖的。 - 在iOS设备,
screen.width
乘以devicePixelRatio
得到的是物理像素值。 - 在Android以及Windows Phone设备,
screen.width
除以devicePixelRatio
得到的是设备独立像素(dips)值
补充:
1.就iphone6 plus的分辨率比iphone5的分辨率高,但是,为什么iphone5的字看上去更大些呢(这里px是一样的数值)
我个人之前就1px=(dpr)^2*dp
可能还是不太理解
就这个例子,我分析下自己对上式的真正的理解
px dp
5 2 1
6plus 3 1
也就是说:5: px与dp的比是 2:1
6: 3:1
但是在物理像素恒定情况在不使用viewport时,要在手机上展示的话就需要压缩,那么字就变小了