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
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 */
}
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.
min-resolution: 120dpi | min-resolution: 1.25dppx | webkit-min-device-pixel-ratio: 1.25 | |
---|---|---|---|
Chrome 44 Android 5.1 |
✓ | ✓ | ✓ |
Firefox 39 Android 5.1 |
✓ | ✓ |
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 |
✓ |
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 |
✓ | ✓ | ✓ |