Question

i’m having a problem with UIWebView auto-rotating.
the web view straches alright but the content is not.
as you can see in the bottom screenshot there is a black margin, and i know it’s the webview since i can see the scrollers when i scroll.

the view controller has:

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation 
{
    return YES;
}

the webview has full auto resizing mask, and the view is auto-resizing subviews.

i tried a bunch of tricks from stackoverflow and google but none of them worked.
this happens only on some sites, but if i open the problematic sites in mobile safari or even ios opera browser, it rotates correctly.

EDIT: an example of a problematic site: http://m.calcalist.co.il

the webview is set in the interface builder and loading with this code:

[_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://m.calcalist.co.il"]]];

scalesPageToFit = YES; // doesn't help

Thanks!

Answer 1

You can set the web view’s scalesPageToFit property to YES.

If you are generating the HTML yourself, then you can also set the viewport meta tag.

If the page has already set the viewport, you can set your viewcontroller to be the web view’s delegate and change it like this:

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

    NSString *javaScript = @"var metatags = document.getElementsByTagName('meta'); \
    for(cnt = 0; cnt < metatags.length; cnt++) { \
        var element = metatags[cnt]; \
        if(element.getAttribute('name') == 'viewport') { \
            element.setAttribute('content','width = device-width; user-scalable = yes'); \
        } \
    }";
    [webView stringByEvaluatingJavaScriptFromString:javaScript];
}

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {

    if ([self interfaceOrientation] == UIInterfaceOrientationPortrait)
        [webView stringByEvaluatingJavaScriptFromString:@"document.body.style.zoom = 1.0;"];
    else
        [webView stringByEvaluatingJavaScriptFromString:@"document.body.style.zoom = 1.5;"];
}