uiwebview not resizing after changing orientation to landscape

Question

I'm coding an iPhone app in which I have a UIWebView that loads a website with a responsive design.

The problem I have is when I rotate the devices to landscape: the UIWebView rotates but it keeps the same width as the portrait mode.

I spent the last 5 hours searching all over the net, I found some solutions that I used but without success...

in my html page i'm using

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

i tried using

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

nothing changed, in my code I'm implementing the following function to handle the rotate, but it gives nothing

- (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation)fromInterfaceOrientation
{
    [self.myWebView stringByEvaluatingJavaScriptFromString:
    [NSString stringWithFormat:
    @"document.querySelector('meta[name=viewport]').setAttribute('content', 'width=%d;', false); ",
    (int)self.myWebView.frame.size.width]];

    NSLog(@"orientation width: %d", (int)self.myWebView.frame.size.width);

}

I also checked the "Scale Page to Fit" checkbox,

(using xcode 5, with an iphone4s and ios7)

Solution 1

Try setting constraints on the UIWebView. When the View rotated, the space constraints should automatically adjust.

In the storyboard, look for the menu icons in the lower right. Select the auto layout icon (looks like a tie fighter), and then select either 'Add Missing Constraints' or 'Reset to Suggested Constraints'.

Solution 2

finally, this solved my problem

- (void)willAnimateRotationToInterfaceOrientation: (UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
   [self.myWebView setFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
}

Comments

[Michael Biermann]

Works great on IOS devices ("Add Missing Constraints"). The simulator also rotatats but seems to get confused a little bit (only three out of four rotations working). For me no need to use Objective C.

[Scotty]

I am not sure why, but specifying 'Upside Down' in the General Deployment Info page, or in the project plist doesn't seem to work. I always add this method to my main view controller to take care of that problem, as well an insure that all other orientations are supported: - (NSUInteger)supportedInterfaceOrientations { return (UIInterfaceOrientationMaskLandscapeLeft | UIInterfaceOrientationMaskLandscapeRight | UIInterfaceOrientationMaskPortrait | UIInterfaceOrientationMaskPortraitUpsideDown); }

[ogoldberg]

Since iPhones don't allow users to lock orientation on landscape mode, portrait-upside-down-mode serves that function. On iPads, however, you are likely to find that portrait upside down mode actually works as expected. It is suggested to simply stick with these defaults unless you have a specific use-case to justify something different.

[Mike Purcell]

+1 for tie-fighter reference, and also that your solution worked, thanks.

[user-44651]

This is the correct answer if you are doing it programmatically.