25

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

msung
  • 3,562
  • 3
  • 19
  • 30
  • 1
    Good one ! This solved it for me as well. You should make it as an answer. – Michael Sep 21 '13 at 14:09
  • 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. – msung Sep 24 '13 at 13:52
  • It`s solution only for iphone app on ipad, on others devices it breaks webpage width. – GreenGood Sep 27 '13 at 13:53

5 Answers5

12

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 ?

MrPatol
  • 905
  • 9
  • 8
  • 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! – scravy Mar 16 '15 at 12:48
4

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

theflyingcar
  • 41
  • 2
1

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.

1

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);
}
aloon
  • 403
  • 7
  • 17
leetvin
  • 21
  • 2
1

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

Gareth
  • 11
  • 2
  • I also used this fix for the status bar http://stackoverflow.com/questions/19209781/ios-7-status-bar-with-phonegap – Gareth Nov 20 '13 at 09:45