what is different between devicePixelRatio and dppx?
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/
No, it's not the same thing. Qmaster explained device-to-pixel ratio concept perfectly, so there is no need to add anything else about that.
The dot density of a screen (or printer) is the number of dots (pixels) it can show (virtually equivalent to "has" in our current fixed-number-of-dots-screen world) per unit of length. CSS features two units in which to express this magnitude:
- dpi (dots per inch)
- dppx (dots per pixel)
When CSS was created, CRT monitors ruled the world and their dot density was typically something around 96dpi. In fact, the definition of pixel according to CSS3 is:
The reference pixel is 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. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).Link.
One dppx is the pixel density found in a 96dpi screen. Mathematically expressed:
1dppx = 96dpi
For example, if the pixel density of your 15-inch laptop is 146.9dpi, it's completely equivalent to say its pixel density is 1.53dppx (1.53=146.9/96).