A quick overview of a method using Media Queries to deliver CSS to both iPhone and iPad only. It's also worth noting that the same method can be used, with a simple adaptation, to deliver CSS to everything except iPhone and iPad devices.

I've been working on a web app for a client using that much blabbed about technique: Responsive Design. For those who have been living in a cave over the past 12 months or so, Responsive Design is a method of delivering CSS to media based on attributes such as: screen width, orientation, resolution and such - all using a magical thing called Media Queries. There's loads of info about it on the web. Google it :)

So, my fuzzy pixel loving chums ...

I mentioned a method of delivering CSS to iPad and iPhone users only. Well, despite the fact I spent ages trying all sorts of variations, it's actually a rather simple syntax, thus:

@media screen and (min-device-width: 320px) and (max-device-width: 1024px)
{

/* css for iphone and ipad only */

}

And for everything except iPhone and iPad devices, we add a simple "not", thus:

@media not screen and (min-device-width: 320px) and (max-device-width: 1024px)
{

/* css for everything except iphone and ipad */

}

^ I find the "not" rule a useful place for putting all my :hover rules, which obviously aren't needed on touch devices.

"What about IE? It don't support Media Thingies, don't it?"

I know. I know. Now using respond.js will go a long way to enabling you to use Media Queries in your everyday projects, but at present it doesn't support the "not" declaration (meaning IE won't see those rules), so you will have to repeat any rules in the "not" media query in your "IE-only" CSS files. Bum.

If someone could patch respond.js to support the "not" declaration - and while you're at it, also patch it so the great selectivizr can be used along side it, that would be "ace-cakes".

At present - when using selectivizr - advanced selectors in IE are ignored when between the media query syntax, meaning you have to revert to old-school classes and such. Double-bum.

Anycakes. I hope this proves helpful. I shall be writing more about Responsive Design and Media Queries again at some point soon.