UIWebView does not scale content to fit - iphone

Question

I have a webview which is the top window in the hierarchy and has been declared as shown below. However, it does not scale pages to fit. Pages are top left aligned, but are not scaled, despite the scalesPageToFit property being set to YES. Any help would be greatly appreciated.
webLookupView = [[UIWebView alloc] initWithFrame:CGRectMake(16, 63, 289, 327)];
webLookupView.backgroundColor = [UIColor lightGrayColor];
webLookupView.dataDetectorTypes = UIDataDetectorTypeAll;
webLookupView.scalesPageToFit = YES;

Answer 1

iOS5 gives a better solution
call this from webViewDidFinishLoad
- (void)zoomToFit
{
if ([theWebView respondsToSelector:#selector(scrollView)])
{
UIScrollView *scrollView = [theWebView scrollView];
float zoom = theWebView.bounds.size.width / scrollView.contentSize.width;
scrollView.minimumZoomScale = zoom;
[scrollView setZoomScale:zoom animated:YES];
}
}

Answer 2

I have subsequently discovered that some web pages are correctly scaled, but some are not. For web pages which are not properly scaled, javascript can be used to control zooming as follows:
NSString *jsCommand = [NSString stringWithFormat:#"document.body.style.zoom = 1.5;"];
[webLookupView stringByEvaluatingJavaScriptFromString:jsCommand];

Answer 3

You can use the below code:
self.webView.scalesPageToFit = YES;
self.webView.contentMode = UIViewContentModeScaleAspectFit;
in - (void)webViewDidFinishLoad:(UIWebView *)webView method
or viewDidLoad

Answer 4

If you have access to the html you are loading you can chuck the following meta tag in the header :
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Answer 5

in Swift2
self.webView.scalesPageToFit = true
self.webView.contentMode = UIViewContentMode.ScaleAspectFit

Answer 6

My solution in swift:
"Scales pages to fit" on webView needs to be checked in interface builder.
Use UIWebViewDelegate.
func webViewDidFinishLoad(webView: UIWebView) {
let zoom = webView.bounds.size.width / webView.scrollView.contentSize.width
webView.scrollView.setZoomScale(zoom, animated: true)
}

Answer 7

As mprivate mentions here you can update the zoom level of the UIWebView.
- (void)webViewDidFinishLoad:(UIWebView *)theWebView {
CGSize contentSize = theWebView.scrollView.contentSize;
CGSize viewSize = theWebView.bounds.size;
float rw = viewSize.width / contentSize.width;
theWebView.scrollView.minimumZoomScale = rw;
theWebView.scrollView.maximumZoomScale = rw;
theWebView.scrollView.zoomScale = rw;
}
Another way of achieving this would be injecting js code on the webViewDidFinishLoad as RunLoop says.
- (void)webViewDidFinishLoad:(UIWebView *)webView {
CGFloat scale = 0.8; // the scale factor that works for you
NSString *js = [NSString stringWithFormat:#"document.body.style.zoom = %f;",scale];
[webView stringByEvaluatingJavaScriptFromString:js];
}

Answer 8

Anybody looking for WKWebView answer, please try the below code:
extension YourViewController: WKNavigationDelegate {
func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
let jscript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"
webView.evaluateJavaScript(jscript)
}
}
Remember to set the navigationDelegate of the Webview.

Answer 9

For Swift 3, using RunLoop's effective answer:
self.webView.stringByEvaluatingJavaScript(from: "document.body.style.zoom = 1.5;")

Answer 10

In xCode 8.3.3, go to the storyboard of the view/scene where the web view is located and check Scale Page to Fit in the attributes inspector section . Also select Scale to Fill as the content mode.

Answer 11

Try this in your ViewController's viewDidLoad
[self.myWebView setFrame:CGRectMake(self.view.frame.origin.x,
self.view.frame.origin.y,
self.view.frame.size.width,
self.view.frame.size.height)];
I also have the webview set to "scalePageToFit" and viewmode set to "Aspect Fit" in my Storyboard.

Answer 12

There is "Scale To Fit" option in interface builder, so it should be something programatic to do the same.