How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?

Question

I’d like to apply a stylesheet exclusively to the iPhone, without doing browser sniffing (via the user-agent string) on the server or via JavaScript.

I particularly don’t want Internet Explorer to apply the stylesheet. Apple’s suggested code for applying an iPhone-specific stylesheet, i.e.:

<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">

seems to cause the stylesheet to be applied by IE 7 and 6.

Answer 1

Use Apple’s suggested code, but wrap it in conditional comments to hide it from IE:

<!--[if !IE]><!-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->

Credit I think to Sitepoint’s iPhone development article for this.