You will also find here various tips and advices that I've collected on the web and from experience.

What are the features that can be used safely?

• screen and print can be used safely, and have been for quite a long time now. In fact, I would argue that the latter is of more importance than the former, as it helps a great deal reducing the pain in making your web pages printable. Given the state of the art in browsers printing, there is little hope of achieving something beautiful in this area, but the print feature makes it easy to have something usable on a printer.
• width and height in px and mm are usable. Of course, what a CSS pixel is is a bit abstract, but those two values refer to something that is consistent across devices. While the case for using the em unit can be made, it remains true that in order to have nice images, you need to have their dimensions defined in pixels. From there, it is more natural to use pixels for everything else. Note that mm measurements are a factor of the pixels and not related to the device physical size.
• width and height in em is usable as well. It gives a meaningful representation of the device.
• The width feature, in all units behave slightly differently on webkit browsers than on Firefox / IE9+: It reports the width including the scrollbar on IE and Firefox while it reports the width without the scrollbar on webkit browsers.
• device-pixel-ratio is also usable in its current state, but apparently only with webkit browsers. I now have several records of a Firefox on a screen which should report something other than 1 and it still reports one, no matter what, even when the resolution in dppx reports 2.
• resolution in dpi is only supported on IE10+, Opera and Firefox. It also does give an indication of the density of the display, but none in regard to the density of the physical pixels vs. the CSS pixels. Thus images natural width cannot be deduced and the information is of limited value.
• orientation has shown some defects on a "out of the box" Galaxy S3. I would recommend against its usage based on this observation.
• device-width and device-height are just unusable in their current implementation.
  • First, Apple decided to make them invariant to the orientation of their mobile devices, while Android went the other route.
  • Second, Apple decided to apply the device-pixel-ratio to them when Android went the other route, making the pixel unit of this value even more cumbersome to use. Moreover, Chrome for Android behaves like Apple's iOS browser.
  • Another thing. Opera had the nice idea of reporting the width of both screens as the device-width on dual monitor setups. They are the only ones to do it.
  • Last but not least, all that your website should care about is the width of the viewport. You cannot force the browser in fullscreen, nor should you, so the device width is pretty much irrelevant.
• resolution in dppx is supported by Firefox 16 and above. Seems to have the same meaning as the mangled min--moz-device-pixel-ratio.
• color will report anything from 1 to 32 depending on the browser and the device. I cannot find any meaning so far.
• color-index has never been detected so far.
• monochrome has never been detected so far.
• aspect-ratio. I have not yet a lot of feedback on that one, but already I can see some pretty strange values, such as 5/1000 on Galaxy S3 browsers and other oddities on the Stock Android browser. This attribute is supposed to accept any "int / int" value according to specs. Actually the specs are pretty vague. I have to point out that my test only test the min prefixed media query and that I only test with a denominator of 1000 (to get some precision). Maybe it's the test that is flawed but I still don't recommend it. Apple and Chrome seems to get it right though.

General advices

• As a general advice, never try to target a specific device. Moreover, never never try to target it with media queries. If the database proves anything it's that many different devices share the same values and that many devices can have different set of values. It all depends on the browser, the os version, the plugins, whether it is in a webview or not, etc. If your website adapts to any width down to 320px (which seems like it's the minimum) you should be fine.
• IE6 to IE8 do not support any of the CSS3 media features, so you're pretty much stuck with screen and print. Hopefully, they do not represent a sizable percentage of the traffic anymore, but you may want to have your site usable through them. The principle is simple: Make sure your CSS that is not in a media query targets the correct representation on a "regular sized" window, say 1024 to 1280 pixels wide. It's not that complex and will ensure that IE6 and 7 see the part that was designed for them. After that, if you need specifics, you can still use conditional comments.
• What would be interesting is to be able to differentiate between touch devices and regular mouse-based ones. Unfortunately media queries cannot do that right now.

Some other things gathered here and there

• The resolution (dpi) do seem to react badly to the value 0. Have a look at the following link for more details.http://www.quirksmode.org/blog/archives/2012/10/the_curious_cas.html

Add a comment

Posted by pieroxy on October 23, 2012 1:32:29 AM PDT #