Message about dppx and dpi on the Chrome console

Question

When I enter the internal system I’m doing here at the company I go to the console and a strange message appears:

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 current 'dpi' of a screen. In media query Expression: only screen and (-Webkit-min-device-pixel-ratio: 2), only screen and (min-Resolution: 144dpi)

What does it mean?

Obs: is only on my system, on other sites like Google for example does not appear.

Answer 1

dppx is a screen size/resolution detection metric as well as dpi. However dpi does not represent the screen in an exact manner.

• dppx: Number of device/screen pixels per CSS pixel
• dpi: points per inch

Chrome by default displays this message if the page uses dpi in its css, since dppx is a more accurate and device-oriented metric that you are viewing. But it’s just a warning from the browser recommending the use of dppx instead of dpi so it better supports the various types of screen sizes.

Disabling the message I think is not possible because it is a default behavior of the browser. But it is possible to convert the use of dpi to dppx.

1px / 1dppx = 96dpi

In your case 2dppx could be used in place of 144dpi.

But, I believe this feature is not yet well supported by browsers like IE.

Follow links to help:

• http://drewwells.net/blog/2013/working-with-dppx/
• http://dev.w3.org/csswg/css-values/#Resolution