Separate CSS for iPhone
December 3, 2009
In order to have a separate CSS file for a web site when rendered on the iPhone (mobile Safari), use the following. Note the exception for IE, as it doesn't understand this stuff.
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)" /> <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-device-width: 481px)" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="desktop.css" media="all" /> <![endif]-->
Take care to load the stylesheets in this order!
Taken from the pre-release version of Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa
