设备独立像素: 也称逻辑像素,(Device Independent Pixel, DIP
),可以理解为反映在CSS/JS代码里的像素点数。
根据设备像素与CSS像素之间的关系、及DPR的官方定义,我们可以推断出:
CSS像素 = 设备独立像素 = 逻辑像素
如果在一个设备中,物理像素与逻辑像素相等,将不会产生任何问题。但是,在iphone 4中,物理像素是640px*960px
,而逻辑像素数为 320*480pt
。因此,需要使用大约4个物理像素来显示1个CSS像素。
也就是说我们经常说的工程师尺寸就是逻辑像素,设计师尺寸就是物理像素。
我们平时描述一张图片宽高时一般用 200px * 100px
,这里的 px
也是逻辑像素。
获取方法:
document.documentElement.clientWidth //iphone6 => 320
document.documentElement.clientHeight //iphone6 => 667