Transition to iOS 7: correct viewport setting for jQuery/iPhone Webapps viewed on iPads

Question

We have an app with essentially one UIWebView which is set to "iPhone App" in XCode.

Until now all worked fine, but using the iOS 7 iPad Simulator the App now appears in "Full Screen" immediately, which would not be the problem, but the WebView also appears to be zoomed in.

I only see the upper right 1/4 of the website thats loaded and have to scroll to see the rest.

We use jQuery mobile 1.3.1 in the application.

edit

I found the error. It seems the semantics of the viewport meta-element changed between iOS versions.

Changing

<meta name="viewport" content="width=device-width, initial-scale=1">

to

<meta name="viewport" content="initial-scale=1">

worked for me, but I am unsure if this is the way to go since the jQuery Mobile Demo Page does set the with to the device-with. When I load the Demo-Page from my UIWebView I get the same effect.

Is there any information on "the right way" to set the viewport, especially since the demo page uses width=device-width

Solution 1

On iOS 7 it has been changed the way of interpreting the vieport meta tag. Here you can find an explanation https://developer.apple.com/library/ios/releasenotes/General/RN-iOSSDK-7.0/#//apple_ref/doc/uid/TP40013202-CH1-SW75 .

Previously, when the viewport parameters were modified, the old parameters were never discarded. This caused the viewport parameters to be additive.

For example, if you started with width=device-width and then changed it to initial-scale=1.0, you ended up with a computed viewport of width=device-width, initial-scale=1.0.

In iOS 7, this has been addressed. Now you end up with with a computed viewport of initial-scale=1.0.

Thw question now is: how this will affect the layout on iOS6< and on Android devices ?

Solution 2

I had an iPhone app that would only "break" on an iOS7 iPad. Removing "width=device-width" from the viewport meta tag fixed it.

Solution 3

My answer is the best, you can have a try，Should be compatible with ios5/ios6/ios7 including android

code:

<meta content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0" name="viewport" />

iOS7 uiwebview may want to change the height：

code:

float version = [[[UIDevice currentDevice] systemVersion] floatValue];

self.webView = [[UIWebView alloc]init];
if (version >= 7.0)
{
    self.webView.frame=CGRectMake(0, 0, rect.size.width, rect.size.height);
}
else
{
    self.webView.frame=CGRectMake(0, 0, rect.size.width, rect.size.height-20);
}

Solution 4

I was having the same problem with a phonegap and removing device-width didn't solve the problem for me.

I had to modify Classes/MainViewController.m

I modified:

- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
    // Black base color for background matches the native apps
    theWebView.backgroundColor = [UIColor blackColor];

    return [super webViewDidFinishLoad:theWebView];
}

To be:

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

    theWebView.backgroundColor = [UIColor blackColor];

    float version = [[[UIDevice currentDevice] systemVersion] floatValue];

    if (version >= 7.0)
    {

        [self.webView stringByEvaluatingJavaScriptFromString:@"$('meta[name=viewport]').attr('content','width=device-width, initial-scale=.42 user-scalable=no');$('body').animate({'opacity':1},300)"];
    }

    return [super webViewDidFinishLoad:theWebView];
}

* UPDATE *

- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
    // Black base color for background matches the native apps
    theWebView.backgroundColor = [UIColor blackColor];


    // iPhone app zoom on iPad with iOS 7 fix

    float version = [[[UIDevice currentDevice] systemVersion] floatValue];

    if (version >= 7.0)
    {

        [self.webView stringByEvaluatingJavaScriptFromString:@"if(!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {$('meta[name=viewport]').attr('content','width=device-width, initial-scale=.42 user-scalable=no');}"];
    }

    [self.webView stringByEvaluatingJavaScriptFromString:@"$('body').animate({'opacity':1},300)"];

    return [super webViewDidFinishLoad:theWebView];
}

I moved the fade in code outside of the if statement as < iOS7 would remain at opacity 0 otherwise

* END UPDATE *

I used the "version" variable and if statement to target iOS 7. Thanks @leetvin

Then reduced the scale from being zoomed in

Initially there was a jump between the zoomed in view and the scaled down view so i set opacity of body to 0 in css and animated/faded in after the resize

View more solutions

Comments

[Michael]

Good one ! This solved it for me as well. You should make it as an answer.

[msung]

Good to know but I'd like to understand why this is the case. I'll put this in as an answer if nobody has a good explanation in a week or so.

[GreenGood]

It`s solution only for iphone app on ipad, on others devices it breaks webpage width.

[Crashalot]

did you find a solution to this? we're suffering from the same issue.

[Gareth]

I also used this fix for the status bar stackoverflow.com/questions/19209781/…

[imaginethepoet]

Where did you add this at? the code change not the meta.

[scravy]

I'd like to repeat: >>hw question now is: how this will affect the layout on iOS6< and on Android devices<< ? This restates the question!