CODEWITHSUNDEEP
iphoneobjective-c
RunLoop
RunLoop

Reputation: 20376

UIWebView does not scale content to fit

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;

Upvotes: 48

Views: 90511

Answers (12)

Mahendra Liya
Mahendra Liya

Reputation: 13218

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.

Upvotes: 2

crissyg
crissyg

Reputation: 123

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.

Upvotes: 1

Rodrigo Gonzalez
Rodrigo Gonzalez

Reputation: 723

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];
}

Upvotes: 2

Van
Van

Reputation: 73

For Swift 3, using RunLoop's effective answer:

self.webView.stringByEvaluatingJavaScript(from: "document.body.style.zoom = 1.5;")

Upvotes: 1

Confused Vorlon
Confused Vorlon

Reputation: 10426

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];
    }
}

Upvotes: 36

idris yıldız
idris yıldız

Reputation: 2117

in Swift2

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

Upvotes: 10

Zoltan Vinkler
Zoltan Vinkler

Reputation: 1283

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)
}

Upvotes: 2

Anthony De Souza
Anthony De Souza

Reputation: 554

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.

Upvotes: -1

vualoaithu
vualoaithu

Reputation: 944

You can use the below code:

self.webView.scalesPageToFit = YES;
self.webView.contentMode = UIViewContentModeScaleAspectFit;

in - (void)webViewDidFinishLoad:(UIWebView *)webView method or viewDidLoad

Upvotes: 23

Mongus Pong
Mongus Pong

Reputation: 11477

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;" />

Upvotes: 17

Kai
Kai

Reputation: 27

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

Upvotes: -7

RunLoop
RunLoop

Reputation: 20376

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];

Upvotes: 29

Related Questions