While I think it's great that people are exploring many different solutions in this area, it's worth noting a drawback of the adapt.js approach. You're left dependent on JavaScript to do something that can be done with CSS in modern browsers and you are forced to create multiple stylesheets.

You're still forced to create multiple stylesheets if you use CSS media queries. Although browsers that benefit most from media queries (e.g, Safari in iPhone) do support media queries.

What this covers, though, are small-monitor users (e.g. netbooks) who use browsers without CSS media query support (say, a netbook user using IE8).

Absolutely and completely wrong. You just make an "@media screen and (max-device-width: #px) {}" declaration in your regular CSS file.

No you are not, check this out: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-m...

Zooming on the iPad completely screws this up.

Not if you disable zooming in the <head> of your page, which you should be doing anyway if you're using media queries (or separate stylesheets) to target mobile devices.

...and make everyone who wants to look closer at something pissed off.

@_____@ Why use this when you can use CSS?