How can I prevent the scaling of a UIWebview's content after reorientation?

Question

I'm building an iOS 5/6 app that has a UIWebView. It loads some HTML that I have embedded in my app.
Now when I rotate my device, the WebView changes its size (as I want it to fill the entire width of the screen).
And then it gets weird: some content gets scaled up and some content doesn't get scaled up. See this image with some example text in it:

As you can see, the header (H6) stays the same, while the paragraph gets scaled up. Does anybody have an idea how to prevent this? I want the html to look the same in landscape as it does in portrait mode.

I've tried setting the viewport scaling to 1: <meta name="viewport" content="initial-scale=1.0,max-scale=1.0"> but that doesn't help. The body's font-size style is set to 14px, but changing that to 14pt or a percentage also made no difference. Setting the width of the body to 100% also didn't help.

Strangely, removing the line break (<br/>) that's in the text fixes it but I need line breaks to be in there so that's no solution.

The only thing that does work is reloading the UIWebView's content after an orientation change, but that doesn't prevent it from looking wrong during rotation, and it resets any scrolling that the user may have done.

Any ideas?

Answer 1

Try this:

body {
  -webkit-text-size-adjust: none;
}