你怎么能得到CSS像素/设备的像素比例？
我想findCSS像素和设备像素之间的比例。
编辑 ：我应该已经意识到，这只是缩放级别。 我已经添加了关于缩放级别的规范引用的答案 。
CSS像素是我们用于几乎所有的单位 – 这是什么element.style.width，element.clientWidth，element.offsetWidth等。 设备像素是浏览器实际绘制的像素。 在设备像素中测量了一些属性，例如window.screen.width，这是用户放大时不会改变的屏幕尺寸（例如1024）。
动机：当用户放大时，我想增加一个canvas的宽度和高度（同时保持style.width和style.height具有相同的CSS像素值），scale（）上下文，并在较高级的canvas上重绘。
我在Surfin的Safari上看过Quirksmode的两个视口和高DPI的 故事 ，但他们都没有说如何得到这个比例。 到目前为止，我唯一的想法是收集mousemoves并测量event.clientX的变化除以event.screenX的变化，或以编程方式使用moz--min-device-pixel-ratio创build媒体查询，使用getComputedStyle()来testing规则是否匹配，并用二分search进行缩小。 我希望有一个更简单/更可靠的方法。
编辑 ：我试过用Chrome，Safari和Firefox 4使用@media (-webkit-min-device-pixel-ratio:1)查询，显然Webkit将这个属性当作一个常量设备像素来屏蔽像素比例不会随着缩放而改变），而Firefox 4将其视为设备像素与CSS像素比率（放大时会增加）。 因此，在Firefox 4中，我可以使用二进制search来发现CSS像素/设备像素比例，但不能使用Webkit。
您可以在基于Webkit的浏览器中使用window.devicePixelRatio来直接在JavaScript中获取设备像素比例。 我在Google Chrome浏览器，Android浏览器（2.2及以上版本）和Mobile Safari上使用了这个function。 我不知道其他浏览器。
你总是可以使用下面的方法，它可以在所有浏览器中工作
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; };
有一个更好的CSS / JS解决scheme：
/** sample media query for pixel-ratio=2" **/ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .pixel-ratio-holder:before { content: "2"; } } function jsPixelRatio(){ return window.getComputedStyle(document.querySelector('.pixel-ratio-holder'), 'before').getPropertyValue('content').replace(/[^az]/g,'') * 1; }
