CODEWITHSUNDEEP
iosiphoneuiwebviewframeautoresize
Oliver
Oliver

Reputation: 23510

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.

enter image description here

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 ?

Upvotes: 29

Views: 72994

Answers (7)

cruzier
cruzier

Reputation: 378

Use sizethatfits() in the webview which would resolve your issue.

Upvotes: 1

Lion
Lion

Reputation: 872

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

Upvotes: 0

Rajni Johar Raswant
Rajni Johar Raswant

Reputation: 245

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

Upvotes: 3

swiftBoy
swiftBoy

Reputation: 35783

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)

Upvotes: 0

zshcbka
zshcbka

Reputation: 426

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!

Upvotes: 2

Nick Weaver
Nick Weaver

Reputation: 47241

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.

enter image description here

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.

enter image description here

Upvotes: 44

salo.dm
salo.dm

Reputation: 2315

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.

Upvotes: 0

Related Questions