different CSS stylesheet for iPad and iPhone in universal application

views:

116

answers:

+3 Q:

different CSS stylesheet for iPad and iPhone in universal application

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.

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.

wsanville 2010-10-11 01:46:32

There is no server side. The UIWebView loads static content locally from the application bundle. Basically I use UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad to check whether I'm executing on an ipad then do some things differently (like present popovers for some things). I need some way to similarly modify the UIWebView to overwrite the CSS file that it loads by default.

Nimrod 2010-10-11 01:49:00

+2 A:

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

Robot K 2010-10-11 02:32:27

This is the route I went with for a recent internal demo and it worked out great. Assuming that your content is mostly the same and you only want to style it differently this is certainly the quickest method I know of.

Toji 2010-10-11 02:38:15

What javascript would I use to inject the CSS links though? innerHTML() or is there a better way? (Sorry, not very familiar with DOM.)

Nimrod 2010-10-11 04:06:44

My JavaScript is crazy rusty. Perhaps @Toji can provide some guidance. I'm not sure if it's speedy or memory efficient, but you could also manipulate the HTML as a mutable string before loading it into the web view.

Robot K 2010-10-11 04:14:10

Why would you need javascript to inject the links? Hard code them on to your page with the correct `media` attributes and the browser will take care of the rest.

Toji 2010-10-11 18:59:17

In the question, Nimrod says he can't easily modify the source files.

Robot K 2010-10-11 19:00:29

ansaurus

tags:

views:

answers:

different CSS stylesheet for iPad and iPhone in universal application

related questions