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

Question

我想找到CSS像素和设备像素之间的比例.

编辑:我应该意识到这只是缩放级别.我已经添加了关于缩放级别的规范参考的答案.

CSS像素是我们几乎用于所有事物的单位 - 它是element.style.width,element.clientWidth,element.offsetWidth等的含义.设备像素是浏览器实际绘制的像素.在设备像素中测量一些属性,例如window.screen.width,其是在用户放大时不改变的屏幕尺寸(例如1024).

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

我在Surfin的Safari上读过Quirksmode的两个视口故事和高DPI,但他们都没有说如何获得这个比例.到目前为止,我唯一的想法是收集mousemoves并测量event.clientX中的更改除以event.screenX中的更改,或以编程方式创建媒体查询moz--min-device-pixel-ratio,使用getComputedStyle(),测试规则是否匹配,并使用二进制搜索缩小规模.我希望有一种更容易/更可靠的方式.

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

Answer 1

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

Answer 2

您始终可以使用以下方法,它可以在所有浏览器中使用

window.getDevicePixelRatio = function () {
    var ratio = 1;
    // To account for zoom, change to use deviceXDPI instead of systemXDPI
    if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI       !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI) {
        // Only allow for values > 1
        ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
    }
    else if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
    }
    return ratio;
};