How to size UIWebView in a UIModalPresentationFormSheet?

Question

I tried every permutation known to mankind and I cannot get a UIWebView to size properly in a modal form view for the iPad. The web page still displays the full iPad portrait width of 768 points.

Where and how do I tell UIWebView to display width 540 points?

I thought 'scalesPageToFit' is supposed to do this but it does not work.

I tried setting the web view to the size of form view which is 540 x 576 with navigation and status bar. Height is irrelevant though.

I tried adding a UIWebView to a UIView in a storyboard with all resizing set. I then removed the UIWebView and added it programmatically.

- (void)viewDidLoad
{
    [super viewDidLoad];

    CGRect aFrame = self.view.frame;

    if (IS_IPAD)
    {
        aFrame = CGRectMake(0, 0, FORM_VIEW_WIDTH, FORM_VIEW_HEIGHT);
    }

    _webView = [[UIWebView alloc] initWithFrame:aFrame];
    [_webView setOpaque:NO];
    [_webView setDelegate:self];
    [_webView setScalesPageToFit:YES];

    self.view = _webView;
    ...
}

I also tried loading in viewDidAppear (in addition to viewDidLoad, viewWillAppear, etc.)

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];

    [[self webView] setFrame:CGRectMake(0, 0, FORM_VIEW_WIDTH, FORM_VIEW_HEIGHT)];
    [[self webView] setScalesPageToFit:YES];

    NSURL *webURL = [NSURL URLWithString:@"http://www.google.com"];
    NSURLRequest *request = [NSURLRequest requestWithURL:webURL cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:5.0f];
    [[self webView] loadRequest:request];
}

Any recommendations appreciated.

Gerkman

Answer 1

This keeps happening to me. I post a lengthy question, then two seconds later I find the answer.

Anyway, someone posted a solution to this problem here: UIWebView -- load external website, programmatically set initial zoom scale, and allow user to zoom afterwards

However, I altered the script to set the width to the iPad width:

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString* js =
    @"var meta = document.createElement('meta'); "
    @"meta.setAttribute( 'name', 'viewport' ); "
    @"meta.setAttribute( 'content', 'width = 540px, initial-scale = 1.0, user-scalable = yes' ); "
    @"document.getElementsByTagName('head')[0].appendChild(meta)";

   [[self webView] stringByEvaluatingJavaScriptFromString: js];
}

Note the portion 'width = 540px, initial-scale = 1.0, user-scalable = yes'

I changed the width to the form width and scale to 1.0.

I also need to handle iPhone, and so I will make adjustments for that next. I think this fix may only be needed for the iPad form view.

UPDATE: Answer is short-lived. If I load any other page the sizing is thrown off again. Back to square one.

SOLUTION: This view will only need to access a few web pages that I developed. Therefore, I updated the few web pages that I need to access by adding the meta tag to each of them. I only need to access these pages and so this is the solution I plan to go with. This means I need to set the viewport width to 540px only for iPad somehow. I will figure that out next.

<meta name="viewport" content="width:540, initial-scale=1, maximum-scale=1">

Gerkman

My current implementation is that I wrote a python script to parse and generate target pages from sources pages as help_ipad.html which are accessed within the form view on the iPad. – Gerkman

One point worth noting: If you do not clear viewport I found when rotating the app it will loose the attributes applied. You can clear viewport by running this script first: [webView stringByEvaluatingJavaScriptFromString: @"$('meta[name=viewport]').remove();"]; – Agriculturist