For a different technique, consider using alternate stylesheets as in: <link rel="stylesheet" type="text/css" href="css/base.css" /> <link rel="stylesheet" type="text/css" href="css/Desktop.css" title="Desktop" /> <link rel="alternate stylesheet" type="text/css" href="css/ Mobile.css" title="Mobile" /> <link rel="alternate stylesheet" type="text/css" href="css/ iPhone.css" title="iPhone" />
To take advantage of this method, you need some Javascript such as at http://www.alistapart.com/stories/alternate/. I've been experimenting with this at http://www.tafiya.com/. This page attempts to deduce the device from the user agent but also lets the user choose a page style. I can't say this is the "best" way. In fact, considering other methods just might confuse you more :-( On Jan 21, 9:09 pm, jonmelville <[EMAIL PROTECTED]> wrote: > What is the best way to do this? I am confused at all the possible > options for serving iphone-only css. > I have tried the following: > > <link media="only screen and (max-device-width:480px)" href > ="small-devices.css" type="text/css" rel="stylesheet" /> > > This works, but it serves it to EVERY browser, not just iPhones. Then > I though about sniffing the useragent, but that is really overkill for > what I am trying to do. I just want to serve one rule to iPhones only: > > body { > -webkit-text-size-adjust: none; > > } > > I want to hide this from other browsers as it doesn't validate. Any > ideas? --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en -~----------~----~----~----~------~----~------~--~---
