Pixel density and Resolution tool for CSS media queries

The tool:

What is about:

Have you ever visited a webpage with blurry images or everything is too small or too big? Developers nowadays have to take into account, that not only the resolution can be an issue, but also pixel density or DPI or dots per inch. This became a priority after the production of Apple's Retina displays which is just a fancy word for high definition screens. With this tool, I'm trying to help you find the best settings on any display.

Open this page on whatever device or browser you want and check. It will show what pixel density or pixel ratio the device/browser has, and it will create media queries for HD or Retina displays.

If you have blurry images, you probably don't have the appropriate CSS media queries for your specific device/screen or browser.

Why you should use the tool:

I've made the tool mainly because others are not entirely accurate. For example, the one I've previously used was showing on my desktop 115dpi instead of 120dpi. I've dropped the Opera prefix as well because at least version 11 is working with "min-resolution" (managed to find version 11 of Opera to verified and it's close to impossible to find an older version).

How to use the tool:

First, you need to open this page on the device/browser that is showing blurry images. After that, copy the values that the tool is showing and replace the XX in the CSS media query below. Now you have CSS media query which can fix the blurry images.

@media (min-resolution: XXdpi),
  (min-resolution: XXdppx),
  (-webkit-min-device-pixel-ratio: XX),
  (min--moz-device-pixel-ratio: XX) {
  ...;
}

Note that the double dash on the -moz prefix is not a typo.

Measurement limits:

You can drop me a line if you have a device that falls outside of the ranges or it's not accurate enough.

• min-resolution (dpi) - range 90dpi - 389dpi (precision 1);
• min-resolution (dppx) - range 1dppx - 15.95dppx (precision 0.5);
• -webkit-min-device-pixel-ratio - range 0.9 - 3.89 (precision 0.01);
• min--moz-device-pixel-ratio - range 0.9 - 3.89 (precision 0.01)

Pro tips:

If you have 'undefined' on min-resolution (dppx), -webkit-min-device-pixel-ratio or min--moz-device-pixel-ratio just remember that they have the same value. For example, if you have Mozilla Firefox -webkit-min-device-pixel-ratio would be 'undefined,' but the value is the same as the min-resolution (dppx) and the min--moz-device-pixel-ratio.

The latest Safari only works with -webkit-min-device-pixel-ratio.

These 4 media query features have the global support of 97.41% (source by CanIUse). It's unrealistic to target 100% because they probably won't use HD monitors or care about blurry images.

You can simulate different pixel density and resolution by zooming the page. However, if you zoom in or out too much, you are going to be outside of our supported range, and everything would be with message 'undefined.'

PS: Creating a responsive image with HTML <img> tags is also easy. You can check out Mozilla MDN article Responsive images.