PDA

View Full Version : 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:



<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 (http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices)

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 (http://www.brooke-products.co.uk).

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.