@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/