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

And the magical solution was:

<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>

If only I knew this week ago.. So much time, so much nerves got lost..

Answer 2

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 */
}

Answer 3

Using the first two answers, the CSS property:

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

and the meta tag:

<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>

I was able to inject both into an existing website, using this javascript code:

var style = document.createElement(\"style\"); 
document.head.appendChild(style); 
style.innerHTML = "html{-webkit-text-size-adjust: none;}";
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);

Using the webViewDidFinishLoad from the UIWebViewDelegate:

- (void)webViewDidFinishLoad:(UIWebView *)webView{

    NSString *javascript = @"var style = document.createElement(\"style\"); document.head.appendChild(style); style.innerHTML = \"html{-webkit-text-size-adjust: none;}\";var viewPortTag=document.createElement('meta');viewPortTag.id=\"viewport\";viewPortTag.name = \"viewport\";viewPortTag.content = \"width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\";document.getElementsByTagName('head')[0].appendChild(viewPortTag);";
    [webView stringByEvaluatingJavaScriptFromString:javascript];

}

Answer 4

You probably just need to read this

https://developer.apple.com/library/content/documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html

Similarly, if you specify only the viewport width, the height and initial scale are inferred. Figure 3-15 shows the rendering of the same webpage when the viewport width is set to 320. Notice that the portrait orientation is rendered the same as in Figure 3-14, but the landscape orientation maintains a width of 320 pixels, which changes the initial scale and has the effect of zooming in when the user changes to landscape orientation.

Answer 5

I tried your case but no luck.

The soluion worked for me was:

[webView reload];

Answer 6

I have another method to solve it by adding element :

<table>
<tr>
<td>
  [your html content]
</td>
</tr>
</table>