iPhone - Auto resizing UIWebView content do not fit the frame

I'm generating an UIWebView into my viewDidLoad method, with a tiny size (let's say something like 50x70). And then I put it into a super UIView.

I'd like to make its content fit the webView frame. To do this, I wrote :

        oneView = [[UIWebView alloc] initWithFrame:CGRectMake(x, y, W, H)];
        oneView.backgroundColor = [UIColor whiteColor];
        oneView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
        oneView.scalesPageToFit = YES;
        oneView.autoresizesSubviews = YES;

        [self.view addSubview:oneView];
        [oneView loadRequest:/*some request*/];

But doing this, the web page is not resized to the frame of the UIWebView. It seems to be scaled to something else, smaller than the superview's frame, and wider than the webview's one.

If I set the webview frame size to the whole superview's size, it's ok.
How may I force the web content (real www content) to fit the frame of the "reduced" UIWebView ?

The answer is: you are already doing this but there are limits.

Look at the following screenshots:

Screeshot 1, scalesPageToFit YES and NO

Both webview have the same width. In the lower one the page fits perfectly.

Screeshot 2, scalesPageToFit both YES but smaller widths set

Both webview try to fit the page but it won't as there is a size limit.

For those, who faced same problem, you can turn off the UIWebView native scrolling by

self.webView.scrollView.scrollEnabled = NO;

and add a separate scrollView which will handle scrolling and zooming instead of webView's native scroll. Next implement

- (void) webViewDidFinishLoad:(UIWebView *)webView
{
   CGRect frame = _webView.frame;
   CGSize fittingSize = [_webView sizeThatFits:_webView.scrollView.contentSize];
   frame.size = fittingSize;
   _webView.frame = frame;
   self.scrollView.contentSize = self.webView.scrollView.contentSize;
}

to set proper webView frame. Hope this helps someone. Good coding!

Try this.That's working for me.

NSString *strTemplateHTML = [NSString stringWithFormat:@"<html><head><style>img{max-width:100%%;height:auto !important;width:auto !important;};</style></head><body style='margin:0; padding:0;'>%@</body></html>", @"insert your html content here"];

[webView loadHTMLString:strTemplateHTML baseURL:nil];

You can do the following:

oneview.contentMode = UIViewContentModeScaleAspectFit;

That will make the content of your view grow as your view grows. The content will grow as big as possible while still fitting within the UIWebView and without distortion.

There are other options for this property, and you will find a pretty good explanation of the more complicated ones, along with pictures showing the effect of each, in the View Programming Guide for iOS

Note that the autoresizing mask you set will make the view itself grow only when its superview grows. If self.view is already big when the small UIWebView is created and self.view does not grow, the UIWebView won't be growing. You're probably aware of this, but I'm adding it just in case, since we can't see self.view's frame in this snippet of code.

Hope this is helpful.

For Swift 2.2 I have achieved the same with

//Document file url
var docUrl = NSURL(string: "https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0ahUKEwjjwPSnoKfNAhXFRo8KHf6ACGYQFggbMAA&url=http%3A%2F%2Fwww.snee.com%2Fxml%2Fxslt%2Fsample.doc&usg=AFQjCNGG4FxPqcT8RXiIRHcLTu0yYDErdQ&sig2=ejeAlBgIZG5B6W-tS1VrQA&bvm=bv.124272578,d.c2I&cad=rja")

let req = NSURLRequest(URL: docUrl!)
webView.delegate = self
//here is the sole part
webView.scalesPageToFit = true
webView.contentMode = .ScaleAspectFit
webView.loadRequest(req)

For Swift 3, I have achieved the same with

DispatchQueue.main.async {
                if let finalURL = URL(string: urlString) {
                    let request = URLRequest(url: finalURL)

                    // self.webView.sizeToFit()
                    self.webView.scalesPageToFit = true
                    self.webView.contentMode = .scaleAspectFit
                    self.webView.loadRequest(request)
                }
            }

Pavel Kanapatski

Try this: