If a device has a pixel-ratio of 2, then 1 CSS pixel is displayed as physical pixel(s) on screen.

It is displayed as 4 physical pixels. This is because the ration of 2 is being applied across the X and Y axis.

Meaning that 1 css pixel with a ratio of 2 is being displayed as 2 horizontal pixels and 2 vertical pixels for a total of 4 pixels.

To make a square :)

Simply multiply the CSS pixel with the device-pixel-ratio to get the number of pixels to be displayed on screen. For example, a device with pixel-ratio of 1, 1 CSS pixel will be 1px on screen. Likewise, a device with pixel-ratio of 2, 1 CSS pixel will be 2px on screen. In the same way, a device with pixel-ratio of 3, 2 CSS pixels will be 6px on screen.

Why? It is a simple ratio between physical resolution and actual screen size (logical resolution) i.e., device-pixel-ratio = physical resolution/actual screen size.

Benjamin Harrison If you are considering both width and height, I guess the best way to present the screen resolution is in the form: width x height, i.e., 2px x 2px, instead of 4px.

pixel-ratio x css-pixel = number of physical pixels

ex. 2(pixel-ratio) x 1(css-pixel) = 2(number of physical pixels)

I would take a lucky guess and say 2. according to wikipedia... http://en.wikipedia.org/wiki/Pixel_aspect_ratio (see the images in the first screen on the right)