Matt Stow

Be careful with font-size: 0 (especially for grids) because many Android browsers don't render the zero space: http://codepen.io/stowball/details/LsICH

Might also want to mention putting HTML comments between your inline-block elements to nullify the space.

And my test http://jsperf.com/byclassname-vs-queryselectorall

While, surprisingly, querySelector(All) has better support, byId & byClassName are so much faster that I'd try and use them where possible

@robsonboral I could but SVG support and multiple background support don't correlate. Android <= 2.3 supports multiple backgrounds, but not SVG for example. I haven't tested it, so I'm not sure what Android <= 2.3 would end up getting

@robsonboral I could but SVG support and multiple background support don't correlate. Android <= 2.3 supports multiple backgrounds, but not SVG for example. I haven't tested it, so I'm not sure what Android <= 2.3 would end up getting

How about testing for actual touch events like this:

var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

It works on all of the browsers you've listed too

No, no, no. Don't reset the HTML font size if doing responsive design.

Your media queries should be in ems to make them scalable with font size changes, so if you set HTML to be 1px your media queries will fire at incorrect sizes.

Leave the default font size at 16px and divide every value pixel value by 16. Even better, use Sass to write a rem mixin that does the conversion for you automatically.

I also have a list of 195 devices and their viewport sizes here: https://docs.google.com/spreadsheet/ccc?key=0AoUAJWmYgaHHdHZZWWpPQkx4eHpBaUxna3dyMGkzLUE&usp=docslist_api

I've been regularly going "viewport shopping" to use devices in store and test their viewports. I'll be adding some of the ones from the Wiki entry too, now.

Note, that the Nexus 7 calculation in the Wiki page is slightly wrong. They changed the pixel ratio in Jellybean to make the portrait width 600px instead of 603px, presumably because developers might use a generic 600px media query.

@ultimatedelman Consider me insulted & I do use Sass, by the way :P Anyway, I just changed my headings in my current build to use .module_header, so thanks for the input

@ultimatedelman I think that's a bit harsh; I'm neither btw.

Clients also use this technique in the main content area. For example, they know what an h2, h3, h4 look like, and how to markup a document correctly, but sometimes they'll feel that an h3 would look better in a particular instance than an h2, so use the .h3 class. There's no "semantic" class name that would suit that purpose, so .hX works fine.