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

Answer 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 ?

Answer 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.