0

Is there a way to scale a web page in a UIWebView that maintains the aspect ratio but alleviates the need to scroll horizontally to read an article, for example. Vertical scrolling is fine, I just don't want the user to have to constantly be scrolling back and forth horizontally to read each line of the article. Thanks!

Edit: the code I'm using to create the view

    _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, [[self view] frame].size.width, [[self view] frame].size.height)];
    [_webView setAutoresizingMask:UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth];
    [_webView setDelegate:self];
    [_webView setScalesPageToFit:YES];
    [_webView loadRequest:[NSURLRequest requestWithURL:[headline link]]];

The link is always formatted for mobile already.

Mason
  • 6,893
  • 15
  • 71
  • 115
  • 2
    There's a property you can set. It's scalesPageToFit. You can set it with either `webView.scalesPageToFit = YES` or in IB under Web View properties. – Dustin Jul 06 '12 at 18:09
  • Yeah, I have that set already, no luck. – Mason Jul 06 '12 at 18:36
  • 1
    Then there's probably some complication involved, the property always works fine for me. Show some code – Dustin Jul 06 '12 at 18:45
  • 1
    Can you share the URL with us? Might be something about that mobile web site. It's strange that you'd have to do any scaling for a mobile web site, at all, because by design, you generally should never have to scroll horizontally. Could it be a problem with that mobile web site you're visiting? – Rob Jul 06 '12 at 18:59
  • It's possible. I'm loading the page in a subview of an iPad app. An example of a link is: http://m.espn.go.com/mlb/story?storyId=8133563&ex_cid=espnapi_public – Mason Jul 06 '12 at 19:00

1 Answers1

8

I think that defining the viewport for your UIWebView could help:

<meta name="viewport" content="width=device-width"/>

this is to use the full width of the device; if your UIWebView is smaller, that you can specify its width in points.

In case you need to add the meta tag to the HTML of your page after loading it, you can use this code:

- (void) webViewDidFinishLoad:(UIWebView *)webView {

  NSString* js = 
  @"var meta = document.createElement('meta'); "
   "meta.setAttribute( 'name', 'viewport' ); "
   "meta.setAttribute( 'content', 'width = device-width' ); "
   "document.getElementsByTagName('head')[0].appendChild(meta)";

  [webView stringByEvaluatingJavaScriptFromString: js];        
}

Also check this S.O. thread for another technique for the same.

Community
  • 1
  • 1
sergio
  • 68,819
  • 11
  • 102
  • 123
  • So I should just prepend the HTML I received with that top line? What's the difference between the top and the bottom solutions? – Mason Jul 06 '12 at 19:48
  • 2
    Bottom solution allows you to do the same in case you do no control the HTML source (the server or the file you load) and need to change it "on-the-fly", i.e., after the webView has loaded it. – sergio Jul 07 '12 at 06:01
  • Thanks! That worked perfectly. However, with this particular URL, it distorts the toolbars on the top. Is there any way to just resize the article itself, rather than the entire page? – Mason Jul 10 '12 at 21:56
  • 1
    Well, this is a different kind of problem, I think. Using the same approach as above, you could override some CSS of the page toolbar, so that it fits the width... I cannot imagine any other way around it. – sergio Jul 11 '12 at 07:32
  • Should we set only in webviewDidFinishLoad method? Cant I set it as soon as I declare webview? – aparna Jan 22 '15 at 01:28
  • It depends on how you load the web view content. It surely won't work if you add the `meta` to the web view, then load it through `loadRequest:`. You could though, get the HTML from your host, then add to it the meta tag as suggested (in this case you would parse the HTML and find the right place where to put it), the use `loadHTMLString:`. Otherwise, if you are going to evaluate JS (as in my answer) you are better off by waiting for the DOM to be fully rendered (i.e., in `webViewDidFinishLoad:`). – sergio Jan 23 '15 at 08:30
  • Inserting HTML after loading seems like a hack. Why doesn't UIWebView report the width of the WebView as `device-width`, instead of the width of the device (or at least have an attribute to toggle this behaviour)? – Rikki Mar 13 '15 at 15:01