1,物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。
2,dpr
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到:
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上,x方向或者y方向
在javascript中,可以通过window.devicePixelRatio
获取到当前设备的dpr。
在css中,可以通过-webkit-device-pixel-ratio
,-webkit-min-device-pixel-ratio
和 -webkit-max-device-pixel-ratio
进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。
这个参数实际上量化了屏幕的物理分辨率和显示清晰度,比如iphone的DPR就是2,比一般的手机都要高。
dpr是设备像素比的意思,dppx是每像素有移少点的意思
dpi和屏幕尺寸(英寸)以及分辨率有关系,dpi是每英寸有多少个点么 401 = sqrt(1080 * 1080 + 1920 * 1920) / 5.5,在开发中你不用关心它。‘
写代码的时候只要关注dpr就可以了,网页的视口的大小是设备分辨率/dpr ,比如iphone 6p是1080p的,但是dpr是2.46,所以实际页面大小是440 * 780 这个分辨率对于苹果设备开发绝对是一个灾难,因为大部分1080p的设备的dpr都是3
写代码的时候只要关注dpr就可以了,网页的视口的大小是设备分辨率/dpr ,比如iphone 6p是1080p的,但是dpr是2.46,所以实际页面大小是440 * 780 这个分辨率对于苹果设备开发绝对是一个灾难,因为大部分1080p的设备的dpr都是3
3,设备独立像素
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。
所以说,物理像素和设备独立像素之间存在着一定的对应关系
,这就是接下来要说的设备像素比
。
4,