iPhone Safari CSS rotation bug

Question

I have a small mobile phone app that is acting strangely on the iPhone/Mobile Safari. The page renders and works great when it\'s orientation is vertical. When I rotate the phon

Answer 1

It's because Mobile Safari on iPhone & iPod Touch does automatic font-size adjustment.

You can disable it with the following css rule,

html {-webkit-text-size-adjust:none}

More info from Safari Reference Library

Answer 2

Have you tried including a viewport meta tag, such as this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Otherwise, you could try creating orientation-specific CSS stylesheets and swap them out w/ javascript when the orientation change event fires, but I prefer the meta tag method above.