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

问题

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">

<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

回答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 ?

回答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.

回答3:

i used your answer but it doesnt solve all of my problems. The initial size remains with ipad's width instead of iphone's.

Also when i try to write on a text the screen zoom itselfs to fill the textbox and only when i press done the screen re-sizes to its proper iphone's size.

I still need a proper solution for this.

回答4:

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);
}

回答5:

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

来源：https://stackoverflow.com/questions/18892491/transition-to-ios-7-correct-viewport-setting-for-jquery-iphone-webapps-viewed-o

标签

ios

ipad

jquery-mobile

uiwebview

ios7