Using different stylesheet for handheld

[WhitePhantom]

Sorry, duplicate post - I posted this in the Webmaster Discussion area, think I should have posted it here instead.

Hi,

I've created a website which is displaying fine on a computer screen. However I want to reduce the size of some of the text when it's being displayed on a handheld device.

I've created a new stylesheet, and copied in one of the divs relating to the section I want to change. In my new stylesheet, I've specified a different font size (also a different font colour, for testing purposes.)

I've now got two lines in my code for linking stylesheets - one that doesn't specify any media type, and the second that specifies media=handheld. I presume where there's any conflicting settings, the second stylesheet will take precedence? ie. when it's displayed on a handheld, all the properties in the first stylesheet will be used, except where the same property has a different value in the second stylesheet?

This is not working however. I've uploaded my page, and uploaded the new stylesheet, but when I view it on the iPhone it's still using the font size and colour specified in the first stylesheet. I've refreshed, and cleared the cache, but to no avail.

Any idea why this is the case? Or what I need to do?

Many thanks,
J.

 

[Firefly Web]

This may in fact work on other handheld devices, however the iPhone Safari browser seems to ignore the media handheld but supports media Screen instead. This may be because the iPhone browser is much more advanced than other handheld devices, Apple recommends targeting the media screen tag for iPhones (I'm not sure what the case is for the new iPhone though) Try something like the following:

media="only screen and (max-device-width: 480px)"

Hope this helps