What is dots-per-CSS-inch and dots-per-physical-inch

Question

I've received this message from Chrome Developer Tools console tab when access jsfiddle.net:

Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)

It's in blue color so I'm assuming that's not a warning or error. So why did I encounter this message? How can I get rid of it or it's just a problem with jsfiddle itself?

Answer 1

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

E.g. the iPhone 3GS had a display with 320 x 480 pixels but the iPhone 4 was released with 640 x 960 pixels. However, instead of showing website at that resolution the browser pretended to have a resolution 320 x 480 pixels.

This leads on to the invention of CSS-pixels. If you specify that something is width:100px in CSS it will be 100 physicals pixels on a normal display but 200 physical pixels on a retina display. A iPhone 3GS and iPhone 4 both have the same dpi (as it is based on pretend CSS-pixels) but very different dppx (as that is based on the real physical pixels).

You can use dppx to detect when a client has a high pixel density screen and serve it a different styling even if the client's browser pretends like it doesn't have that high pixel density.

 .comp {
     background-image: url(image.png);
 }

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

More info here on CSS-pixels: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution