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?

Ation

It's actually a Chrome debug message and there's not much you can do about it since it's based on the code being run on jsFiddle. You can filter out the debug messages so you don't see them, but that's about it. – Insist

There should be a way to disable this annoying message. – Deaf

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([email protected]);
     }
 }

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

Expansive

This is horrible. Just give me the device's physical dpi and I'll be happpy, Google and Mozilla. – Solicitude