Converting between physical pixels and CSS pixels

Mozilla's documentation from elementFromPoint explains that the 开发者_StackOverflow中文版coordinates are not in physical pixels, but "CSS pixels". Exactly what are CSS pixels? I was under the impression that a pixel in CSS was the same as the physical pixel.

If this is not the case, how does one convert between physical and CSS pixels?

---

A pixel is a physical screen pixel as far as any web page can reasonably concern itself.

The wording ‘CSS pixel’ refers to a pixel as defined in CSS 2

the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees.

What this is saying is that a CSS pixel is a device pixel for the normal, simple screen cases. However, for specialist super-high-res screens where the OS scales up its normal dimensions by two, a CSS pixel may be two device pixels wide.

We now also have a ‘zoom’ feature in most browsers, which will naturally change the size of the CSS pixel (along with all other units) so it doesn't match a device pixel.

---

As I'm sure you know, CSS provides a number of different units for representing length. Some are based on physical, real-world measurements (inches, millimeters, points) while others are relative to something else (em width, percentage).

But pixels are neither of these. Originally, they were (as you assumed) merely the smallest addressable dot on a user's screen. However, this is problematic for a number of reasons:

• The renderer may actually be using sub-pixel positioning to avoid rounding errors.
• The output device may not have pixels - a ten-dot font on a 600dpi printer is unlikely to reflect what the designer actually wanted.
• Similar to printing, pages designed for common, low-resolution displays (72-96dpi) may be unreadable on high-resolution displays.
• Modern browsers offer powerful tools to scale / magnify pages.

And so CSS pixels are a useful abstraction: they have well-defined relations to other measurements (at least, within a given browser...) and thus page designers can rely on the results looking reasonably close to their designs even when the browser must change the relationship to actual, device pixels.

To answer your second question, you don't convert between physical and CSS pixels. That would defeat the whole point by destroying an abstraction that the renderer needs in order to operate properly. Gecko does provide a way to determine the relationship, but only to chrome scripts - normal web pages should remain blissfully unaware...

Further reading: Units Patch Landed

---

In most cases, yes, CSS pixels are the same as physical pixels. According to the CSS 2.1 Specification:

Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.

Typically, 1 pixel on the device will be the same as 1 pixel in CSS. On a device with a very high pixel density, you might find that its CSS pixel size is actually 2 physical pixels wide, but I don't know of any devices that do so. Not even the iPhone 4, with its Retina Display, will adjust its CSS pixel size.

As pointed out by Shog9, most browsers' zoom features will adjust the scale of the pixels being displayed, but in most cases, CSS pixels will be the same as the physical device.

---

Conversion can be done with window.devicePixelRatio; now supported by all major browsers

See https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio