CSS 像素与物理像素

CSS 像素是浏览器和设计系统使用的逻辑单元。物理像素是显示器上的实际硬件点。在现代设备上,这些值通常不相同,这就是为什么如果在不考虑缩放的情况下比较不同的工具,坐标可能看起来错误。

如果您正在构建界面、查看屏幕截图或检查点击目标,您需要知道您的坐标值是否与显示逻辑或硬件像素相关。

为什么差异很重要

浏览器可以报告基于 CSS 的位置,而设备本身则以更密集的物理分辨率呈现。这意味着同一可见点可以根据您选择的测量模式产生不同的坐标值。

简单示例

屏幕对于浏览器来说可能看起来有 1000 像素宽,但实际上是 2000 物理像素宽。在这种情况下,CSS 像素中 X=500 处报告的点可能大致对应于物理像素中的 X=1000。

相关指南

打开工具 | DPI 缩放如何影响坐标 | Mac 的屏幕坐标