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

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:UIWebview rotation issue

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?

Upvotes: 4

Views: 2012

Answers (3)

Flavio Tordini
Flavio Tordini

Reputation: 553

Try this:

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

Upvotes: 10

Shinigamae
Shinigamae

Reputation: 862

If you are coding on XCode (I assume that because you are using UIWebView)

  • Choose the UIWebView on the nib.
  • Ultilities pane > Size inspector > in the Autosizing box, remove both double-direction arrows.
  • The UIWebView now has fixed size and won't automatically scale to orientation.

Is this what you want?

Upvotes: -1

Saliom
Saliom

Reputation: 1040

I'm not sure, but it might be the scalesPageToFit propertie on your UIWebView.

Upvotes: 2

Related Questions