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)

Was it helpful?

Solution

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'. enter image description here

OTHER TIPS

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)];
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top