iPhone HTML apps - Conditional iPhone style sheets

iPhone HTML web app style sheets FAQ: I'm trying to optimize my HTML/web app for the iPhone, how do I specify a style sheet to be used for just the iPhone?

There are several different approaches you can take, but with CSS3 the most direct approach you can take is to add an expression to your iPhone CSS link tag, as shown here:

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

Conversely, if you want to specify a style sheet for other devices (non-iOS devices), you can use a CSS link expression like this:

<link media="screen and (min-device-width: 481px)"
      href="not-ios-device.css"
      type="text/css"
      rel="stylesheet">

Before I started using jQuery Mobile I used both of these expressions, and they worked just fine. With jQuery Mobile all the hard work like this is done for you.

For more information on specifying conditional iPhone style sheets for your iPhone web apps, see Apple's Safari web developer documentation.

iPhone HTML web apps - Conditional style sheets

I hope this tip on specifying conditional style sheets for your iPhone HTML web app has been helpful. As you can see, with CSS3 you can specify conditional expressions to make this task much easier.