different CSS stylesheet for iPad and iPhone in universal application

Question

I have what is essentially an offline web site embedded in a UIWebView. I've created a stylesheet to format everything nicely on the iPhone screen, but I need different formatting to take better advantage of the iPad's screen.

I tried using code to simply copy a different stylesheet into place, but this involves modifying the application bundle which is either discouraged or, in this case, just doesn't work.

Can anyone think of a way to have a different stylesheet loaded based on whether the app is running on the iPhone or iPad? I have thousands of HTML files which are synchronized with a web site so I can't very easily modify all of them. I need some way to change the stylesheet that gets loaded using javascript or by moving the css file into a certain location.

I should also mention that this is a universal application with almost the exact same code (and slightly different nib files) running on both.

Answer 1

Can you use a CSS media query? You could inject it into your pages using stringByEvaluatingJavaScriptFromString:.

Answer 2

Via your server side code, you could detect the iPad User Agent and write out a link tag to a different stylesheet. I would probably go with server side logic rather than Javascript, simply because I don't like the possibility of a "flicker" of doing this with Javascript.