javascript - 如何获得 CSS 像素/设备像素比？

Question

我想找到 CSS 像素和设备像素之间的比率。

编辑:我应该意识到这只是缩放级别。我有 added an answer缩放级别的规范引用。

CSS 像素是我们用于几乎所有事物的单位——这就是 element.style.width、element.clientWidth、element.offsetWidth 等的含义。设备像素是浏览器实际绘制到的像素。一些属性以设备像素为单位进行测量，例如window.screen.width，当用户放大时不会改变的屏幕尺寸(例如 1024)。

动机:当用户放大时，我想增加 Canvas 的宽度和高度(同时保持 style.width 和 style.height 相同的 CSS 像素值)，scale() 上下文，并在更清晰的放大 Canvas 上重绘.

我读过 Quirksmode's A Tale of Two Viewports和 High DPI on Surfin' Safari ，但他们都没有说如何获得比率。到目前为止，我唯一的想法是收集 mousemoves 并测量 event.clientX 的变化除以 event.screenX 的变化，或者使用 moz--min-device-pixel-ratio 以编程方式创建媒体查询, 使用 getComputedStyle() 测试规则是否匹配，并通过二分查找缩小范围。我希望有更简单/更可靠的方法。

编辑:我试过在 Chrome、Safari 和 Firefox 4 中使用 @media (-webkit-min-device-pixel-ratio:1) 查询, 并且显然 Webkit 将该属性视为设备像素与屏幕像素 的恒定比率(不随缩放而改变)，而 Firefox 4 将其视为设备像素与 CSS 像素 比率(放大时增加)。所以在 Firefox 4 中，我可以使用二进制搜索发现 CSS 像素/设备像素比率，但不能使用 Webkit。

Answer 1

您可以在基于 Webkit 的浏览器中使用 window.devicePixelRatio 直接在 JavaScript 中获取设备像素比率。我已经在 Google Chrome、Android 浏览器 (2.2+) 和 Mobile Safari 上使用过它。不过我不知道其他浏览器。