View Full Version : css for mobile/smart phones

07-07-2010, 02:07 PM

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)

07-07-2010, 04:58 PM
And what iPhone did you use to test? Also, please provide a link.

07-07-2010, 05: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).


07-08-2010, 04: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.