设备像素比是什么？
无抓取抓取浏览器提供可配置的浏览器会话，用于测试不同视口和屏幕配置下的布局和自动化。
TL;DR
- 设备像素比比较物理显示像素与 CSS 像素。 更高的值意味着浏览器可以使用更多的设备像素来表示一个CSS像素。
- DPR 不是屏幕分辨率。 分辨率给出像素尺寸，而DPR则表达比例关系。
- 页面缩放可以改变 window.devicePixelRatio。 捏合缩放通常会放大视觉视口，但不会以相同的方式改变CSS像素比例。
- 画布和屏幕截图需要明确的DPR处理。 它们的后备位图可以大于它们的 CSS 布局大小。
- 自动化配置文件必须保持DPR、视口、屏幕和设备类别的一致性。 矛盾的值可能会触发错误的布局或揭示不现实的环境。
为什么一个 CSS 像素不是一个硬件像素
设备像素比影响浏览器如何暴露状态、渲染内容或决定何时安全执行自动操作。精确定义防止团队将狭窄的信号视为通用答案。它还使测试失败更容易诊断，因为预期的浏览器行为与文档生命周期、API或系统边界相关联。
对于网页自动化，实际的问题总是比“页面准备好了吗？”或“浏览器看起来真实吗？”要狭窄得多。下一步可能需要启用一个控件、一个框架完成导航、一个组件附加其内部树，或一个渲染表面保持一致。以下部分将这一概念转化为可观察的检查，而不是依赖于民间传说。
核心设备像素比公式
设备像素比例是当前显示环境中物理设备像素与CSS像素之间的比率。比率为1意味着一个CSS像素在简化模型中映射到一个设备像素。比率为2意味着一个CSS像素跨越一个2x2的设备像素块，为渲染器提供更多的物理样本，以处理边缘、文本和图像。
规则： 1. 只输出翻译后的文本 — 不要解释，不要额外的包裹代码块。 2. 精确保留Markdown/HTML结构（标题、列表、链接、表格）。 3. 保持任何占位符标记如@@CODEBLOCK_0@@或@@INLINECODE_0@@完全不变；绝不要翻译、重新排序、合并或重新格式化它们。 4. 不要添加或删除```代码块，并且不要将普通文本包装在代码块中。 The MDN 设备像素比参考 定义该属性为物理像素分辨率与CSS像素分辨率的比率。浏览器通过window.devicePixelRatio以浮动小数值的形式暴露该值。值不必是整数，因为操作系统缩放和页面缩放可以产生分数结果。
CSS 像素是一个逻辑布局单元。它使得在物理密度非常不同的屏幕上接口依然可用。如果没有这种抽象，描述为固定数量硬件像素的按钮可能在密集的手机显示屏上变得非常小。设备像素比将逻辑坐标系统与可用显示样本连接起来。
CSS 像素、设备像素和分辨率
屏幕分辨率通常被描述为物理像素的宽度和高度。CSS视口大小以逻辑像素来描述。设备像素比将它们联系起来，但浏览器边框、操作系统缩放、方向和舍入意味着简单的乘法并不总能准确再现每个屏幕值。
密度是每单位物理长度的物理像素，而DPR是浏览器的缩放比例。两个屏幕可以共享相同的分辨率，但具有不同的物理尺寸，因此密度不同。两个浏览器也可以在具有不同基础密度的设备上暴露相同的DPR，因为操作系统选择适合可读用户界面的缩放比例。
翻 CSSOM 视图中 devicePixelRatio 的定义 指定浏览器如何从 CSS 像素大小和设备像素大小派生出值。该标准框架比将 DPR 视为 Retina 等市场标签更加精确。这是一个在运行时的浏览器值，当渲染环境发生变化时，可以改变这个值。
为什么 Zoom 更改图片
页面缩放会改变CSS像素相对于设备像素的大小，因此当用户放大或缩小时，window.devicePixelRatio的值可能会发生变化。监听分辨率媒体查询变化的页面可能会观察到这一过渡。在不同缩放比例的显示器之间移动窗口也可能改变该值。
捏合缩放是不同的。它在不以相同方式重新定义布局 CSS 像素的情况下，为用户放大视觉视口。因此，响应式布局断点不一定像页面缩放那样表现。测试缩放的自动化应定义它是改变浏览器页面缩放、模拟设备缩放因子还是操纵视觉视口。
分数DPR值得关注。将CSS大小乘以比例可以产生非整数位图尺寸。画布和截图逻辑必须选择一种舍入策略，而图形代码必须避免假设每个CSS边缘都干净地映射到设备像素边界上。小的舍入差异可能会表现为模糊的线条或一个像素的接缝。
在 Canvas、图像和截图中的 DPR
一个画布有一个 CSS 显示大小和一个内部位图大小。如果两者在高 DPR 显示上使用相同的数值维度，浏览器会将较低分辨率的位图拉伸到更多设备像素上，这可能看起来比较模糊。一个常见的方法是通过 DPR 缩放位图维度，然后缩放绘图坐标系统，以便应用程序代码仍然使用 CSS 单位。
图像也具有内在的像素尺寸和 CSS 布局尺寸。响应式图像选择可以使用密度描述符，以便浏览器选择适合当前环境的资源。提供较大文件而没有正确的 CSS 尺寸并不会自动改善布局；它只会提供给渲染器更多的源细节。
自动化截图可能会根据API报告CSS像素、设备像素或工具特定的单位。来自DPR两倍上下文的全页截图可能包含比CSS页面大小建议的位图像素更多的实质性像素。测试断言应该比较正确的坐标空间，并在每个视觉基准上记录DPR。
设备像素比作为指纹信号
DPR可以成为浏览器指纹的一部分，因为它缩小了可能的设备和缩放配置集。单独来看，它粗糙且广泛共享。与屏幕宽度、屏幕高度、视口、颜色深度、触摸支持、平台和用户代理结合使用时，它变得更加信息丰富。
这 W3C指纹识别指导 建议最小化暴露的熵并考虑信号组合。这个组合原则解释了为什么仅改变DPR并不能完全模拟设备。具有桌面视口、没有触点和不相关像素比的移动用户代理内部不一致。
对于授权自动化，选择作为一致集合的设备配置文件。一起定义视口、屏幕尺寸、DPR、方向、输入能力、区域和用户代理。保持它们在会话中稳定。如果目标是响应式测试，测试一个小矩阵的命名配置文件，而不是产生没有真实显示器通常使用的任意宽度和DPR组合。
调试布局和视觉测试问题
当截图不同时，首先记录window.devicePixelRatio、视口尺寸、屏幕尺寸、页面缩放和截图位图大小。确定差异是布局更改还是仅仅是光栅化更改。一个CSS盒子可以占据相同的逻辑大小，同时其边缘使用不同数量的物理像素。
检查使用分辨率、宽度、悬停和指针特性的媒体查询。页面在给定的DPR下可能会加载不同的图像或组件。检查画布的支持尺寸和传递给浏览器工具的任何设备缩放设置。避免通过添加任意延迟来修复视觉差异；时间并不能纠正坐标空间的不匹配。
将视觉基准固定到命名的浏览器构建和设备配置文件。浏览器文本渲染在版本之间仍然可以改变，因此在像素完美平等不是实际产品要求的情况下允许可审查的容忍度。对于布局断言，首选以CSS像素为单位的DOM几何形状。对于渲染质量，使用截图，并将DPR作为证据的一部分保留。
选择可重现的显示配置文件
从能证明任务可以继续的最小条件或配置开始。保持标准兼容的浏览器行为，然后仅在工作流程需要时添加配置文件控制。记录浏览器构建和相关状态，以便后来可以解释差异。可重复的观察比宽泛声称页面、框架、显示或指纹“完成”或“安全”更有用。
- 定义下一个动作。 准确说明脚本或用户在等待或配置步骤后需要做什么。
- 选择一个可观察信号。 优先考虑直接支持该动作的浏览器属性、生命周期状态、元素条件或渲染结果。
- 保持相关值的一致性。 浏览器、操作系统、屏幕、区域、图形和会话设置应描述一个合理的环境。
- 验证正常的应用程序行为。 隐私或自动化干预不应悄悄破坏其所更改的API或组件。
- 捕获诊断证据。 当检查失败时，保存相关的URL、状态、控制台消息和配置名称。
结论
设备像素比将浏览器的CSS坐标系统与物理显示像素连接。它影响光栅质量、画布支持存储、响应式资产、截图和指纹一致性，但它不是分辨率或物理密度的替代品。可靠的自动化记录DPR与视口和屏幕设置，并保持整个设备配置文件的一致。
这 无痕抓取浏览器文档 解释了如何配置受管理的浏览器会话，而 抓取浏览器产品概述 描述了浏览器自动化表面。这些资源为在授权工作流程中应用该概念提供了产品背景。
准备测试高DPI浏览器布局吗？
将浏览器渲染、会话配置和自动化基础设施移入受管的Chromium环境。
今天注册并获得 5美元的免费积分 — 无需信用卡.
领取您的5美元积分→常见问题
设备像素比总是整数吗？
不。操作系统缩放和浏览器页面缩放可以产生分数设备像素比值。
DPR与DPI一样吗？
不。DPR是设备像素和CSS像素之间的浏览器比率，而DPI描述每物理英寸的像素或点密度。
为什么在高DPR显示器上画布绘图模糊？
画布可以有低分辨率的支持位图，这样就被拉伸到其CSS大小，因此位图尺寸和绘图比例需要明确的DPR意识处理。
设备像素比可以在会话中改变吗？
是的。页面缩放或在不同缩放的显示器之间移动窗口可以改变暴露的值，因此应用程序可以监测分辨率变化。