Converting between physical pixels and CSS pixels

Question

Mozilla\'s documentation from elementFromPoint explains that the coordinates are not in physical pixels, but \"CSS pixels\". Exactly what are CSS pixels? I was under the imp

Answer 1

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.