In the world of web development, the device pixel ratio (also called CSS Pixel Ratio) 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/
....