css for mobile/smart phones

robert475 · 07-07-2010, 01:07 PM

Hi

I would like to optimise my site for blackberrys, iphone etc. I have read a little up on using the relevant style sheet using this approach:

Code:

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

Sadly when i tested it on the iphone and blackberry nothing is changed. Does anyone have any experience or tutorials on how to tackle this type of scenarios?

I have used the following link as a reference but like i said i have run into a brick wall!

site

Apostropartheid · 07-07-2010, 03:58 PM

And what iPhone did you use to test? Also, please provide a link.

robert475 · 07-07-2010, 04:45 PM

I have tested it on the iphone 3gs, also on a the blackberry bold.

The link is here.

At the moment the style sheet for mobile.css is empty as i am testing it but whether its on the smart phone or pc it is using the default style sheet (styles.css).

Thanks

Apostropartheid · 07-08-2010, 03:24 PM

I get a 404 on that.

Mobile devices will add the contents of the mobile stylesheet onto the normal one. You will have to actually change something to see an effect.