As consultas de mídia mais curtas para exibição de alta densidade de pixels

@media only screen e (-webkit-min-device-pixel-ratio: 2),
apenas tela e (min-resolution: 192dpi) {
/ * alguns css de alta resolução (Retina) * /
}

este MQ funciona em Webkits (Safari, Chrome, Android, MeeGo, Dolphin etc.) e Firefox, Opera e IE *

em vez de usar as ridículas versões prefixadas da proporção de pixel de dispositivo como esta (o exemplo mostra uma tela de 1,5x, em vez de 2):

@media only screen e (-webkit-min-device-pixel-ratio: 1,5),
apenas tela e (min – moz-device-pixel-ratio: 1,5),
apenas tela e (-o-min-device-pixel -ratio: 3/2)
somente tela e (min-device-pixel-ratio: 1.5) {
/ * alguns css de alta resolução * /
}

  • observação: a resolução é suportada no IE9 e no IE10 Mobile, no entanto, de acordo com meu contato na Microsoft, o layout do IE Mobile é feito em 96 dpi independentemente do dispositivo, portanto o valor de dpi não reflete o dispositivo real.

Mais: veja meu blog
http://girliemac.com/blog/2012/08/03/resolution-in-media-queries/