Mar 27

Right Scale for a UIWebView

Windows & Views Add comments

If you’re using a UIWebView to display rich text from a string of HTML (as I described yesterday) you can even include HTML links to external URLs.

However when the external web page is displayed it is done using the same scale as your local HTML page. Unless the two pages are about equal in size, the visual transition is less than pleasing.

You can use the scalesPageToFit property of UIWebView to fix this. See line 13:

- (void)loadView
{
  // Create a custom view hierarchy.
  CGRect appFrame = [[UIScreen mainScreen] applicationFrame];
  UIView *view = [[UIView alloc] initWithFrame:appFrame];
  view.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
  self.view = view;
  [view release];

  CGRect webFrame = [[UIScreen mainScreen] applicationFrame];
  webView = [[UIWebView alloc] initWithFrame:webFrame];
  webView.backgroundColor = [UIColor whiteColor];
  webView.scalesPageToFit = YES;
  [self.view addSubview:webView];
}

But this causes another problem: your internal HTML page probably looks a lot smaller than you would like. To fix this we’ll use a trick that web app developers use to optimize web sites for the iPhone.

To the HTML code add a meta viewport tag:

<meta name="viewport" content="width=320"/>

The complete code looks like this:

NSString *html = @"<html><head><title>The Meaning of Life</title><meta name=\"viewport\" content=\"width=320\"/></head><body><p>...really is <b>42</b>!</p></body></html>";
[webView loadHTMLString:html baseURL:nil];

written by Nick \\ tags: , ,

4 Responses to “Right Scale for a UIWebView”

  1. Kenny Goers Says:
    April 7th, 2009 at 13:21

    Only problem I had when using this is that the text I used was larger than the physical screen size the scrolling bounces back and the whole text isn’t completely visible unless pulled up.

    Any thoughts?

  2. Nick Says:
    April 7th, 2009 at 18:16

    @Kenny: This sounds more like an HTML problem. If you can get the HTML to render well in Safari, it should display the same way in UIWebView.

  3. pitibalrog Says:
    November 9th, 2012 at 04:34

    Thank you for this tips. It save me a lot of time!

  4. Wendell Beverly Says:
    January 16th, 2013 at 21:52

    I was having this exact problem. I was reading in XML data to populate a table view with the RSS title. Once the title was touched in the table view a webview would appear to show the XML “description” which was HTML read in and displayed. However, with links in the XML that go to actual web pages the web page would show wonky. The scalesPageToFit setting does not work for both.

    The web developer I was working with tried the meta tags in her HTML (she uses Drupal) but that had no effect.

    I managed to read the HTML that was getting passed to the web view and based on that, could dynamically turn scalesPageToFit to YES or NO depending on which way it was going.

    – (BOOL)webView:(UIWebView*)wv
    shouldStartLoadWithRequest:(NSURLRequest*)request
    navigationType:(UIWebViewNavigationType)navigationType {

    NSString *tempURLString = request.URL.absoluteString;

    if([tempURLString rangeOfString:@”about:blank”].location == NSNotFound)
    {
    wv.scalesPageToFit = YES;
    }
    else
    {
    wv.scalesPageToFit = NO;
    }

    [loadingIndicator startAnimating];
    return YES;
    }

    This worked like a charm!

Leave a Reply