devicePixelRatio是浏览器提供的一个只读属性,用来表示当前显示设备的物理像素分辨率与CSS像素分辨率之间的比值,也可以理解为一个CSS像素对应多少个物理像素。它随着高分辨率屏幕的普及而出现,是网页在高密度屏幕上判断清晰度、决定加载何种尺寸图片以及处理画布与缩放问题的重要依据。
定义
devicePixelRatio是浏览器窗口对象(Window)上的一个只读属性,返回当前显示设备的物理像素分辨率与CSS像素分辨率之比[1]。这个比值也可以理解为像素大小的比率,即一个CSS像素的大小与一个物理像素的大小之间的关系。通俗地说,它告诉浏览器应当用屏幕上的多少个实际像素来绘制一个CSS像素[2]。
它的取值是双精度浮点数。取值为1表示传统的96 DPI显示器,高密度屏幕即HiDPI或Retina屏幕上的期望取值通常为2[1]。在分辨率异常低的显示器上,或者当屏幕像素密度超过标准分辨率的两倍时,也可能返回其他数值;现代移动设备屏幕分辨率高而物理尺寸小,取值常常大于2。
原理
要理解这个属性,先要区分两种像素。设备像素又称实体像素,是设备上能够显示的最小颜色点;CSS像素则是CSS规范定义的物理测量单位,规定1像素等于1/96英寸[3]。长期以来,用96 DPI来估算屏幕像素密度是合理的,这也是Windows自20世纪80年代起的默认分辨率[3]。
随着LED显示器普及和2010年苹果推出Retina显示屏,设备像素的物理尺寸不再与CSS像素一致[3]。由于需要定义两者的大小关系,devicePixelRatio被引入,有时也被称为CSS像素比率[3]。它的计算关系可以概括为:$devicePixelRatio = \frac{物理像素分辨率}{CSS像素分辨率}$。按此关系,192 ppi的屏幕其比值为2,因为2个显示屏像素的大小相当于1个CSS像素[3]。
浏览器的页面缩放会改变这一取值。当页面被放大时,一个CSS像素的尺寸随之增大,该属性的值也相应增大;而双指捏合式的缩放不会影响它,因为那只是放大页面而不改变CSS像素的大小。页面缩放显示为分数值时,也可以在开发者工具控制台中观察到[4]。
发展历程
在devicePixelRatio出现之前,设备的像素信息并非无法获取。微软的Internet Explorer 6就提供了deviceXDPI与deviceYDPI属性,Internet Explorer 9起还可以通过媒体查询的resolution特性获取类似信息[5]。在这些版本中要得到同样的比值,需要用屏幕的物理像素除以逻辑像素,即window.screen.deviceXDPI除以window.screen.logicalXDPI[5]。
devicePixelRatio很快成为事实上的通用标准,Internet Explorer 11对其提供了支持,并把该属性定义为物理设备像素与经过DPI调整的逻辑CSS像素之间的比值[5]。在浏览器兼容性方面,Chrome自第4版起支持该属性,Firefox自第18版起支持,而此前的Firefox 2至17版本并不支持[6]。
该属性的行为也经历过调整。在Firefox 18和Chrome 25之前,它不纳入浏览器缩放级别;自这两个版本起,缩放级别开始被计入取值,这为高清三维游戏绘制界面元素带来了新的问题,因此2013年有开发者向W3C游戏社区组提出增加一个不随缩放变化的新属性[7]。
应用
最常见的用途是为不同像素密度的屏幕准备不同尺寸的图片,从而让图片在高分辨率屏幕上保持清晰[3]。开发者可以把密度描述符1x、2x、3x与srcset属性配合使用,明确告诉浏览器每张图片面向的目标像素密度,浏览器便无须先下载图片来判断[3]。例如CSS宽度为250像素的图片,在比值为2的设备上应准备宽度500像素的版本,在比值为3的设备上则应准备750像素的版本[3]。
在画布元素上,该属性同样被用于修正清晰度。画布在Retina屏幕上可能显得模糊,可以利用该属性确定需要额外增加多少像素密度,做法是按比值放大画布在内存中的实际宽度和高度,再把坐标系缩回CSS像素[2]。此外,开发者可以借助窗口的matchMedia方法监听该属性的变化,例如用户把窗口拖到像素密度不同的另一块显示器上时,取值就会改变[1]。
局限
该属性反映的是比值,而非屏幕的真实物理密度。比值为2只说明一个CSS像素恰好对应2个物理像素,并不能由此推导出屏幕的每英寸像素数[4]。正因为浏览器会按96 DPI的虚拟屏幕来换算CSS像素,在大多数屏幕上宽度设为1厘米的元素实际并不正好是1厘米[4]。
取值还受浏览器缩放影响,这会给部分场景带来困扰。以放大为基点做乘法计算时,元素可能既被脚本按比值放大,又被浏览器按缩放再放大一次,实际放大的倍数因此偏离预期[7]。同时,该属性是只读的,不能由脚本直接设定,向不同显示器迁移窗口或调整缩放时,页面需要重新读取甚至重新创建媒体查询实例来响应变化[2]。
在像素对齐环节,非整数比值同样构成限制。CSS像素是虚拟单位,布局可能解出分数值,而物理像素没有分数形式,浏览器需要把分数像素值对齐到整数物理像素,具体做法因浏览器而异[4]。这种差异可能造成一像素的偏差,进而带来图像模糊或叠纹效应等问题[4]。
参见
参考资料
- Window.devicePixelRatio [引用日期2026-10-14]
- github.com 上的网页 [引用日期2026-10-14]
- 使用密度描述符 | Articles | web.dev for China [引用日期2026-10-14]
- device-pixel-content-box [引用日期2026-10-14]
- High DPI support (Windows) - 跳到主要內容 跳過到 Ask Learn 聊天體驗 [引用日期2026-10-14]
- Window.devicePixelRatio [引用日期2026-10-14]
- w3.org 上的网页 [引用日期2026-10-14]