What are dots per CSS inch and dots per physical inch

Question

I got this message from the Chrome Developer Tools console tab when accessing jsfiddle.net :

Consider using the dppx units instead of the dpi, as in CSS, dpi means dots-per-CSS-inch, not dots per physical inch, so it doesn’t correspond to the actual dpi of the screen. In the expression for queries in the media: only and (-webkit-min-device-pixel-ratio: 2), not everything, not all, only the screen and (min-resolution: 192 dpi), only the screen and ( min resolution: 2dppx)

It is blue, so I assume this is not a warning or error. So why did I come across this post? How can I get rid of it or is it just a jsfiddle myself?

Answer 1

This applies, but is not limited to Retina apple displays. These displays have a higher pixel density than previously used screens, but the browser still acts as if it had the same number of pixels.

eg. The iPhone 3GS had a display with a resolution of 320 x 480 pixels, but the iPhone 4 was released with a resolution of 640 x 960 pixels. However, instead of displaying the website with this resolution, the browser pretended to have a resolution of 320 x 480 pixels.

This leads to the invention of CSS pixels. If you specify that something is width:100px in CSS, it will be 100 pixels of physical objects on a regular display, but 200 physical pixels on the retina. IPhone 3GS and iPhone 4 have the same dpi (since it is based on fake CSS pixels), but very different dppx (since it is based on real physical pixels).

You can use dppx to determine when the client has a screen with a high pixel density and performs a different style, even if the client browser pretends that it does not have such a high pixel density.

  .comp { background-image: url(image.png); } @media only screen and (min-resolution: 2dppx) { .comp { background-image: url([e-mail]); } } 

Additional CSS pixel information: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution