Webpage in UIWebView doesn't autoresize correctly when UIWebView's width is less than the window's width

Question

I made a simple test project containing only one UIWebView on a UIView filled the window. When the UIWebView's width is the same as UIView, everything works well. When the UIWebView's width is less than the container's width, horizontal scrollbar appears irregularly. The webpage I load is a local html file. The width is not set so it should fit the browser/UIWebView's width.

Please help. Thanks.

The iPad simulator.

The answer may depend on the markup in your local HTML file. Is there anything in there (e.g. styles) that specify width? — Jim Blackler, Apr 08 '11 at 11:42

score 8 · Answer 1 · edited Mar 23 '15 at 14:08

method 1. webView.scalePageToFit = YES, but when the width of the webView changes, the font size of the webpage will change accordingly, to solve this, you can try method 2:

method 2. dynamically set the width of the webView in your Objective-C code, so that when the width of the UIWebView is changed, change the width of the HTML webpage by calling a javascript script.

int webViewWidth = isPortraitOrLandscape ? 768:1024; // the dynamic width of the webView
NSString *javascript = [NSString stringWithFormat:@"document.getElementsByTagName('body')[0].style.width = '%dpx'", webViewWidth];
[webView stringByEvaluatingJavaScriptFromString:javascript];

by doing this, the width of the webView could be matched with the actual HTML webpage.

very good. The first does not seems to work for me sometimes, specially when using the UIWebView inside the detail controller of a splitiviewcontroller (No idea why). The second approach works fine, but I could only make it work with the following JS string format `@"document.getElementsByTagName('body')[0].style.width = '%1.0fpx'"` — Felipe Sabino, Jul 17 '12 at 22:33

score 4 · Answer 2 · edited May 23 '17 at 12:33

The above solutions didn't quite work for me either. The question wants the text to wrap at the appropriate browser view size, not scale the content down, nor allow scrolling.

My fix was to force a viewport into the html by executing some sneaky javascript:

javascript = [NSString stringWithFormat:@"var viewPortTag=document.createElement('meta');  \
              viewPortTag.id='viewport';  \
              viewPortTag.name = 'viewport';  \
              viewPortTag.content = 'width=%d; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;';  \
              document.getElementsByTagName('head')[0].appendChild(viewPortTag);" , (int)authWebView.bounds.size.width];

[authWebView stringByEvaluatingJavaScriptFromString:javascript];

Your milage may vary depending on other viewport settings you may or may not need, or if your webpage already has a meta tag specifying the viewport.

The javascript idea came from this answer: How to insert metatag without using jquery append?

Nice solution. Setting the width like this worked well for me where I am using an embedded UIWebView in landscape mode on iPad. Shouldn't there be commas instead of semicolons though? — gavdotnet, Jun 22 '15 at 10:41
Also, an alternative if you want to update an existing viewport tag instead of adding a new one: `NSString *javascript = [NSString stringWithFormat:@"document.querySelector('meta[name=\"viewport\"]').setAttribute(\"content\", \"width=%d,initial-scale=1.0,maximum-scale=1.0,user-scalable=0\")", (int)authWebView.bounds.size.width];` — gavdotnet, Jun 22 '15 at 10:44

score 1 · Answer 3 · answered Apr 08 '11 at 18:04

1

You can set an explicit width for your viewport by including a meta tag in your <head> like this:

<meta name = "viewport" content = "width = 590">

See the Safari Web Content Guide.

answered Apr 08 '11 at 18:04

cduhn

17,818
4
49
65

Also it is not good if you want to make the HTML responsible, working on both iphone and ipad (or even android devices). Also, thinking about reusing the HTML, if you target also old android devices and uses position fixed (which is currently my case) you have to use `` http://caniuse.com/#search=position – Felipe Sabino Jul 17 '12 at 22:37

score 0 · Answer 4 · answered Apr 08 '11 at 11:41

0

Tyr to make web view mode Scale to fill.

answered Apr 08 '11 at 11:41

Chetan Bhalara

10,326
6
32
51

If UIWebView's mode Scale Pages to Fit is TRUE, the text will look smaller in portait than that in landscape. Because this view is wider in landscape. That is not I expected. – Xenofex Apr 08 '11 at 12:23

Webpage in UIWebView doesn't autoresize correctly when UIWebView's width is less than the window's width

4 Answers4