Hi,

 

I am fairly new at optimising sites for mobile viewing. I have been testing my website (http://www.helenlowrie.co.uk/index.html) on a friend's iPhone 4G but it will not read the handheld stylesheets for the pages and is instead reading the screen stylesheets. The handheld stylesheet should move the navigation buttons to the top, above the main content area, and also do other things like remove a lot of the images, hide various elements, resize text etc. I have tried increasing the max-device-width from 480 to 960 to allow for this new iPhone's bigger screen. In my handheld stylesheets I have also added the following:

 

@media all and (max-device-width: 960px) {

 

(css here)

 

}

 

Is there a basic error I am making? I have also tried testing it on my Nokia N85 but as far as I know the N85 only reads screen stylesheets, doesn't notice @media and of course won't read any kind of handheld stylesheet.

 

If anyone has any ideas I would be most grateful! As the iPhone is now such a popular phone I really want my site to read properly on it!

 

Many thanks!

 

the Screen stylesheet:

index.css

 

The handheld stylesheet:

indexhandheld.css

By default the iPhone doesn't render "handheld" stylesheets so that's why you see your normal site.

 

There are numerous articles on this but http://www.cssdiscussion.com/viewtopic.php?id=25 should help you.