在物理像素和CSS像素之间转换

Question

来自elementFromPoint的 Mozilla文档解释了坐标不是物理像素,而是"CSS像素".究竟什么是CSS像素？我的印象是CSS中的像素与物理像素相同.

如果不是这种情况,如何在物理像素和CSS像素之间进行转换？

Answer 1

只要任何网页可以合理地关注自身,像素就是物理屏幕像素.

措辞"CSS像素"指的是CSS 2中定义的像素

最佳近似参考像素的设备像素的总数.建议参考像素是设备上一个像素的视角,像素密度为96dpi,距离读取器的臂长.对于标称臂长28英寸,视角因此约为0.0213度.

这就是说,CSS像素是普通简单屏幕案例的设备像素.但是,对于操作系统将其正常尺寸缩放2的专业超高分辨率屏幕,CSS像素可能是两个设备像素宽.

我们现在在大多数浏览器中都有一个"缩放"功能,它会自然地改变CSS像素的大小(以及所有其他单位),因此它与设备像素不匹配.

Answer 2

我相信你知道，CSS 提供了许多不同的单位来表示长度。有些是基于物理、真实世界的测量值（英寸、毫米、点），而有些则是相对于其他东西（em 宽度、百分比）。

但像素不是这两者。最初，它们（如您所假设的）只是用户屏幕上最小的可寻址点。但是，由于多种原因，这是有问题的：

• 渲染器实际上可能使用子像素定位来避免舍入错误。
• 输出设备可能不具有像素-一个600dpi的打印机上十点的字体不太可能反映了设计者其实是想。
• 与打印类似，为常见的低分辨率显示器 (72-96dpi) 设计的页面在高分辨率显示器上可能无法读取。
• 现代浏览器提供了强大的工具来缩放/放大页面。

所以 CSS 像素是一个有用的抽象：它们与其他度量有明确定义的关系（至少，在给定的浏览器中......）因此页面设计者可以依赖看起来与他们的设计相当接近的结果，即使浏览器必须更改与实际设备像素的关系。

要回答您的第二个问题，您不会在物理像素和 CSS 像素之间进行转换。这将破坏渲染器正常运行所需的抽象，从而使整个论点落空。Gecko 确实提供了一种确定关系的方法，但仅限于 chrome 脚本 - 正常的网页应该保持幸福不知道......

进一步阅读：单位补丁登陆

Answer 3

window.devicePixelRatio;现在所有主流浏览器都支持转换

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio