CSS 像素与物理像素
CSS 像素是浏览器和设计系统使用的逻辑单元。物理像素是显示器上的实际硬件点。在现代设备上,这些值通常不相同,这就是为什么如果在不考虑缩放的情况下比较不同的工具,坐标可能看起来错误。
如果您正在构建界面、查看屏幕截图或检查点击目标,您需要知道您的坐标值是否与显示逻辑或硬件像素相关。
为什么差异很重要
浏览器可以报告基于 CSS 的位置,而设备本身则以更密集的物理分辨率呈现。这意味着同一可见点可以根据您选择的测量模式产生不同的坐标值。
简单示例
屏幕对于浏览器来说可能看起来有 1000 像素宽,但实际上是 2000 物理像素宽。在这种情况下,CSS 像素中 X=500 处报告的点可能大致对应于物理像素中的 X=1000。
- 当您关心浏览器或 UI 布局行为时,请使用显示模式。
- 当您关心实际屏幕密度或硬件级位置时,请使用本机模式。
- 记录共享坐标值时使用的模式。