what is different between devicePixelRatio and dppx?

Question

I have do some research about devicePixelRatio and dppx:

deicePixelRatio: returns the ratio of the (vertical) size of one physical pixel on the current display device to the size of one CSS pixel.

dppx: dots per ‘px’ unit.

I think they are just the same thing, but I am not sure, am I right?

Answer 1

In the world of web development, the device pixel ratio (also called CSS Pixel Ratio and also referred to as dppx) is what determines how a device's screen resolution is interpreted by the CSS.

CSS interprets a device's resolution by the formula: device_resolution/css_pixel_ratio. For example:

Samsung Galaxy S III

Actual resolution: 720 x 1280 CSS Pixel Ratio: 2 Interpreted resolution: (720/2) x (1280/2) = 360 x 640

When viewing a web page, the CSS will think the device has a 360x640 resolution screen and Media Queries will respond as if the screen is 360x640. But the rendered elements on the screen will be twice as sharp as an actual 360x640 screen.

Some other examples:

Samsung Galaxy S4

Actual Resolution: 1080 x 1920 CSS Pixel Ratio: 3 Interpreted Resolution: (1080/3) x (1920/3) = 360 x 640

iPhone 5s

Actual Resolution: 640 x 1136 CSS Pixel Ratio: 2 Interpreted Resolution: (640/2) x (1136/2) = 320 x 568

The reason that CSS pixel ratio was created is because as phones screens get higher resolutions, if every device still had a CSS pixel ratio of 1 then webpages would render too small to see. A typical full screen desktop monitor is a 24" monitor at 1920x1080. Imagine if that monitor was shrunk down to < 5" but had the same resolution. Viewing things on the screen would be impossible because they would be so small.

Here is a tool that also tells you your current device's pixel density:

http://bjango.com/articles/min-device-pixel-ratio/

Here is a searchable list of device pixel ratios (they accept pull requests via GitHub if you have devices to add to this list)

http://dpi.lv/