Last Updated: February 25, 2016
·
3.644K
· girlie_mac

The shortest media-queries for high pixel-density display

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
/* some hi-res (Retina) css */
}

this MQ work on Webkits (Safari, Chrome, Android, MeeGo, Dolphin etc.) and Firefox, Opera and IE*

instead of using the ridiculous prefixed-versions of device-pixel-ratio like this (the example shows 1.5x screen, instead of 2):

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2)
only screen and (min-device-pixel-ratio: 1.5) {
/* some hi-res css */
}

  • note: resolution is supported on IE9 and IE10 Mobile, however, according to my contact at Microsoft, IE Mobile’s layout is done at 96dpi independently of the device so the dpi value not reflect the actual device.

More: see my blog
http://girliemac.com/blog/2012/08/03/resolution-in-media-queries/