UX Design and Development course

Retina Display Media Query

This is a great article by Chris at CSS-Tricks and you should read it top to bottom! But here is a summary of the idea.

Basically, there will be cases when you need to create media queries based on the physical resolution of the device. The common example is to write something like the following where you are creating a query on device ratio, but this is not pretty AT ALL! As you can see, Opera used to play a different game. One of the fails of vendor prefixing.

@media
  (-webkit-min-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6/2),
  (min--moz-device-pixel-ratio: 1.3) {
    ...
}

Notice something awkward? What the hell is 1.3? Well, there were a handful of Android devices out there that fell into this category. The Asus Nexus 7 is one of them.

These devices will soon fall off the map, but in the mean time you may need to consider them in a query.

That's yesterday, what's the future?

Ok, so -webkit-min-device-pixel-ratio will probably never be a standard and is again something that is quickly falling out of favor. Except for Webkit o_O

To stay up to speed, I would keep an eye on MDN's discussion on <resolution>.

dppx

This unit represents the number of dots per px unit. Due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi, that corresponds to the default resolution of images displayed in CSS as defined by image-resolution.

Device pixel density tests

This is an awesome tool to visualize the queries and your device.

http://bjango.com/articles/min-device-pixel-ratio/