UIWebView dones't resize correctly when orientation change?

Question

I have add a webview,a titleLabel and a coverflowView on a viewcontroller\'s view as its subviews, I want it to change size when the orientation change. I have change the we

Answer 1

I upvoted @christophercotton's response since it worked. But I also found I could fix a problem similar to this without controlling the webview object. His solution put me on the right track for my problem.

        var el = $('meta[name=viewport]');
    if (window.orientation == 90 || window.orientation == -90) {
        el.attr('content', 'width=device-height');
    } else {
        el.attr('content', 'width=device-width');
    }

This works in iOS. Have not tried it in android (for those using the likes of PhoneGap).

Answer 2

Just giving a headsup if others have same problem.

The webview wont resize properly because the HTML is already rendered (iam not sure if this is completely true, might just be a bug in the webview itselfs), but anyway. I made a method that resizes the webview html body width:

- (void) resizeHtml
{
     NSString *jsString = [[NSString alloc] initWithFormat:@"document.getElementsByTagName('html')[0].style.width= '%dpx'", (int) _frame.size.width];

    [self.webView stringByEvaluatingJavaScriptFromString:jsString];
    [jsString release];
}

This seems to work just fine on the iphone, but on the ipad i had to do this

- (void) reloadHtml
{
    NSString *html = [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.outerHTML"];

    if(html == nil || [html isEqualToString:@""] || [html length] < 100)
        [self.webView reload];

    [self.webView loadHTMLString:html baseURL:[NSURL URLWithString:@"some base url"]];
}

You could also have used [self.webview reload] but that would make another request to the server, and i think that is bad ;-)

I hope this helps!

Answer 3

I was also experiencing the problem of the UIWebView contents not sizing properly when switching from landscape to portrait.

After hunting around for awhile, I found my answer:

"One way I've found to handle this is to reload the content after the resize. When I say "reload," I don't mean the built-in reload function on UIWebView, I mean the actual call to loadHTMLString: baseURL: (or whichever method you use to load your content initially)." Agent Gold's post on Apple Support forum

Answer 4

I tried Christoper's answer, translating his OOC code to Swift, but not working.

Finally, I have to make the UIWebView reload the webpage if the screen size changed. It might be a hack, but works anyway. Wish this answer could help Swift developers more or less. The function below belongs to your UIViewController.

override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)
    coordinator.animateAlongsideTransition(nil, completion: {context in
        self.webView.reload()            
    })
}

Answer 5

I spent about two days trying to track this problem down, as I was having the exact same issue. I found that my view if it started off in Portrait mode would correctly resize to Landscape. But, if I started the view in Landscape mode, it would keep the same size in Portrait.

If your view is the entire width of the device, just adding the following meta tag will work.

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

But, in my case, our UIWebView is a nonstandard size. Setting the viewport to device-width just makes it worse! I was able to have everything work out correctly by setting the viewport dynamically using javascript. This should be done during the UIWebViews parent view's layoutSubviews. You can do it in the willRotateToInterfaceOrientation, but I found out if you do in willRotate some of the sizes and interfaces might not be setup correctly. Try it there first and see how the animation works.

The code just sets the viewport size to the current frame size. The HTML you are viewing must have a meta viewport tag already (as above). If you can't edit the HTML, there are other ways of adding it via javascript. The easiest is to just add in the meta tag into the <head> tag. Then use the following code, AFTER you have set the frame correctly:

 // assuming your self.viewer is a UIWebView
[self.viewer stringByEvaluatingJavaScriptFromString:
     [NSString stringWithFormat:
     @"document.querySelector('meta[name=viewport]').setAttribute('content', 'width=%d;', false); ",
      (int)self.viewer.frame.size.width]];

You can add in other viewport items if you don't want the user to scale, or you want to set the max scale. This ended up making the view behave correctly for our UIWebView.

Answer 6

I just had the same issue.

The solution that worked for me was to set:

webView.scalesPageToFit = YES;