UIWebView auto rotation corrupts web view content (screenshots inside)

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!

before rotation

after rotation

Can you plz add your code related to webview ? How do you create and put ? — Janak Nirmal, Jul 18 '11 at 09:38

score 3 · Answer 1 · edited Nov 15 '12 at 12:37

3

Set the frame in willAnimateRotationToInterfaceOrientation and then set the meta tags.

Also you can set this property of UIWebView:

webView.autoResizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

edited Nov 15 '12 at 12:37

Neil

54,642
8
60
72

answered Jul 18 '11 at 10:11

DivineDesert

6,924
1
29
61

this solution works for me. not the picked answer one – temple Jun 16 '14 at 17:47
Yes, this works but theres a mistake in code: autoResizingMask => autoresizingMask, with the 'R' not capitalized. – Jimmy Dec 26 '14 at 01:14

Morten Fast · Accepted Answer · 2011-07-18T11:27:05.733

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

The site you mention (m.calcalist.co.il) has the viewport set to a width of 320, so it's not going to get any wider than that. It's the page design that's wrong, not your implementation. — Morten Fast, Jul 18 '11 at 11:03
Updated my answer to show how to break free from a restrictive viewport. — Morten Fast, Jul 18 '11 at 11:28

UIWebView auto rotation corrupts web view content (screenshots inside)

2 Answers2

Linked