如何获得CSS像素/设备像素比率？ [英] How can you get the CSS pixel / device pixel ratio?

问题描述

我想要找出CSS像素和设备像素之间的比例。

编辑：我应该意识到这只是缩放级别。我添加了一个答案到缩放级别的规范引用。

CSS像素是我们用于几乎所有的单位 - 它是什么element.style.width，element.clientWidth，element .offsetWidth等意思。设备像素是浏览器实际绘制的像素。在装置像素中测量几个性质，例如window.screen.width，这是用户放大时不改变的屏幕大小（例如1024）。

动机：当用户放大时想要增加画布的宽度和高度（同时保持style.width和style.height相同的CSS像素值），scale（）上下文，并在一个更清晰的缩放画布上重绘。

我已阅读 Quirksmode的两个视口的故事和 Surfin'Safari上的高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相比。

解决方案

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

I want to find the ratio between CSS pixels and device pixels.

Edit: I should have realized that this is just zoom level. I've added an answer to the canonical reference on zoom levels.

CSS pixels are the unit we use for almost everything--it's what element.style.width, element.clientWidth, element.offsetWidth etc. mean. Device pixels are the pixels that the browser actually paints to. A few properties are measured in device pixels, e.g. window.screen.width, which is the screen size (e.g. 1024) that doesn't change when the user zooms in.

Motivation: when the user zooms in, I want to increase a canvas's width and height (while keeping style.width and style.height the same CSS pixel value), scale() the context, and redraw on a crisper upscaled canvas.

I've read Quirksmode's A Tale of Two Viewports and High DPI on Surfin' Safari, but neither of them say how to get the ratio. The only ideas I have so far are to collect mousemoves and measure change in event.clientX divided by change in event.screenX, or to programatically create media queries using moz--min-device-pixel-ratio, use getComputedStyle() to test whether the rule matched, and narrow it down with a binary search. I hope there's a easier/more reliable way.

Edit: I've tried using the @media (-webkit-min-device-pixel-ratio:1) queries with Chrome, Safari, and Firefox 4, and apparently Webkit treats the property as a constant device pixel to screen pixel ratio (which doesn't change with zoom), whereas Firefox 4 treats it as device pixel to CSS pixel ratio (which increases when you zoom in). So in Firefox 4, I can discover the CSS pixel / device pixel ratio using a binary search, but not with Webkit.

解决方案

You can use window.devicePixelRatio in Webkit based browsers to get the device pixel ratio directly in JavaScript. I have used this on Google Chrome, Android browsers (2.2+) and Mobile Safari. I have no idea about other browsers though.

这篇关于如何获得CSS像素/设备像素比率？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！