The ultimate “target retina screens” media query

mir.aculo.us JavaScript with Thomas Fuchs » Blog Archive » The ultimate “target retina screens” media query:

There now is an abundance of devices with some sort of high-density display, from MacBook Pros to iPads, from Windows Surface tablets to all kinds of mobile phones.

All of these devices have one thing in common: In web browsers (that support the high-density screen correctly) one CSS pixel is not equal to a physical screen pixel.

In terms of CSS, to specifically target this group of devices, unfortunately there’s no easy way to say “apply this set of rules to all devices where physical pixels are not equal to CSS pixels”. Instead you have to fight through a whole forest of media query rules.

@media (min--moz-device-pixel-ratio: 1.5),

(-o-min-device-pixel-ratio: 3/2),

(-webkit-min-device-pixel-ratio: 1.5),

(min-device-pixel-ratio: 1.5),

(min-resolution: 144dpi),

(min-resolution: 1.5dppx) {

/* Retina rules! */

}

'via Blog this'