移动web开发-理解设备像素、CSS像素、DPR
定义
像素(pixel)是图像显示的基本单位。在网页中,一个像素就是计算机能够显示一种特定颜色的最小区域。
当设备尺寸相同但像素变的更密集时,屏幕能显示的画面的过渡更细致,大致像下面这样
ppi是指屏幕上每英寸可以显示的像素点的数量,即屏幕像素密度
分类
像素可以分为设备像素和CSS像素
设备像素(device independent pixels): 设备像素也叫物理像素,任何设备的物理像素是固定不变的。比如我的笔记本的分辨率是1366 * 765,表示的就是宽度上最多容纳1366个物理像素点,高度上最多容纳765个物理像素点
CSS像素(CSS pixels):CSS像素也叫逻辑像素,是为web开发创造的。通常情况下,在桌面端,CSS像素的大小和设备像素的大小是相等的,即一个CSS像素完全覆盖了一个设备像素,图片表示如下
但是在手机端,我们都知道网页可以通过手指进行缩放,这时候CSS像素也会改变
当用户进行缩小操作时,一个设备像素覆盖了多个CSS像素
图中深蓝色表示设备像素,半透明的浅蓝色表示CSS像素
当用户进行放大操作时,一个CSS像素覆盖了多个设备像素
DPR
DPR(devicePixelRatio)指的是设备像素比,即网页在不进行缩放使,设备像素和CSS像素的比值
DPR = 设备像素 / CSS像素(某一方向上)
其实,在早先的移动设备中是没有DPR这个概念的,随着技术的发展,移动设备的屏幕像素密度越来越高,就出现了DPR这个概念。
从iphone4开始,苹果公司推出了retina视网膜屏幕,这种技术在屏幕大小不变的情况下,屏幕像素密度提高了一倍,分辨率自然也提高了一倍,于是DPR等于2
通过JS的screen.width
和screen.height
属性,可以获取屏幕的CSS像素
通过JS的window.devicePixelRatio
属性,可以获取屏幕的DPR值
以iphoneX为例,css像素为375px * 812px
,DPR是3,可以计算出设备像素是1125px * 2436px
屏幕尺寸
屏幕尺寸也是一个比较常见的概念,它指的是屏幕对角线的长度。比如iphone6 Plus的屏幕尺寸是5.5英寸,指的是屏幕的对角线的长度是5.5英寸长
1英寸 = 2.54厘米
屏幕分辨率
屏幕分辨率就是设备像素,一般以纵向像素 * 横向像素
来表示分辨率。比如iphoneX的设备像素是1125px * 2436px
,分辨率也就是1125px * 2436px
DPI和PPI
DPI(Dots Per Inch)是印刷行业中的术语,表示打印机每英寸可以喷的墨汁点数。计算机显示设备借鉴了DPI的概念,PPI(Pixels Per Inch)表示的是每英寸的像素数量,即像素密度(Screen density)。
在计算机显示设备中,可以认为PPI和DPI是一样的,都是代表屏幕像素密度
(PPI或DPI) = 对角线分辨率 / 屏幕尺寸