Updated July 30, 2015

Sensible HiDPI Media Queries

These are the results of my media query test for determining how to serve high-resolution assets to every browser. I’ve established a pixel ratio of 1.25x so that HiDPI assets are served to any display better than 1x. For more, read Making Sense of HiDPI Media Queries on my blog. Or, view the test.

Skip to iOS · Android · OS X · Windows

Suggested Syntax

For our media query, we combine the two rules that cover every browser, and add print so that high resolution assets are served when printing pages from your site.

   
@media print,
   (-webkit-min-device-pixel-ratio: 1.25),
   (min-resolution: 1.25dppx) {
      /* Styles go here */
   }

iOS Back to Top

  min-resolution: 120dpi min-resolution: 1.25dppx webkit-min-device-pixel-ratio: 1.25
Safari 9
iOS 9
    1

1 All iOS browsers use the system WebKit engine, so support will be identical to Safari.

Android Back to Top

  min-resolution: 120dpi min-resolution: 1.25dppx webkit-min-device-pixel-ratio: 1.25
Chrome 44
Android 5.1
Firefox 39
Android 5.1
 

OS X Back to Top

  min-resolution: 120dpi min-resolution: 1.25dppx webkit-min-device-pixel-ratio: 1.25
Chrome 44
OS X 10.11
Firefox 39
OS X 10.11
 
Safari 9
OS X 10.11
   

Windows Back to Top

  min-resolution: 120dpi min-resolution: 1.25dppx webkit-min-device-pixel-ratio: 1.25
Chrome 44
Windows 10
Firefox 39
Windows 10
 
Microsoft Edge
Windows 10