UIWebView resizes text after rotating: looking for explanation for magical bug or my stupidity

Question

so I have UIWebView in my application and I load some html (article) to it, put some CSS to make everything nicer. That's simple and clear and everything is perfect until I try to add reading in landscape functionality and then I've noticed that UIWebView ignores any css "font-size" I've put in HTML and increases font size drastically after rotating to landscape mode.

I've spent about 4-5 hours (I'm new to programming Iphone application, but I'm quite stubborn when it comes to making something right) trying to fix it. Tried lots and lots of configuration options - NOTHING.

And tonight something magical has happened. Just look at source:

Landscape with The Bug:

r = CGRectMake(0.0, 0.0, 480.0, 320.0);
[adView.view removeFromSuperview];
if (!isFullScreen) {
    minus = 50 + minus;
    [controlsView setFrame:CGRectMake(0, r.size.height - 50, r.size.width, 50)];        
} else {
    minus = 20; 
}

[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];  
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];

Landscape fixed (font size does not change anymore):

r = CGRectMake(0.0, 0.0, 480.0, 320.0);
[adView.view removeFromSuperview];
if (!isFullScreen) {
    minus = 50 + minus;
    [controlsView setFrame:CGRectMake(0, r.size.height - 50, r.size.width, 50)];        
} else {
    minus = 20; 
}
[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];  
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];

if (!isFullScreen) {
    minus = 1 + minus;
} else {
    minus = 20+1;   
}
[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];  
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];

As you can see I only added the same code one more time and increased margin (minus) by one point. And did setFrame again (no, it doesn't fix the resizing with only one set of setFrames).

I'm happy it works, but I would like to know HOW and WHY, so I can do it "right way", because now code looks stupid and have 1 point heigh margin at the bottom of application.

And don't ask why I've tried to copy paste the same code again..

Answer 1

The Safari Web Content Guide also mentions how to disable autosizing of text in the CSS, which solved the problem in my case.

html {
    -webkit-text-size-adjust: none; /* Never autoresize text */
}