过渡到iOS 7：在iPad上查看的jQuery / iPhone Webapps的正确视口设置 [英] Transition to iOS 7: correct viewport setting for jQuery/iPhone Webapps viewed on iPads

问题描述

我们有一个基本上有一个UIWebView的应用程序，在XCode中设置为iPhone App。

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

到目前为止一切正常，但使用iOS 7 iPad模拟器应用程序现在立即显示在全屏中，这不是问题，但WebView也似乎放大了。

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.

我只看到右上角1 / 4加载的网站，必须滚动查看其余部分。

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

我们在应用程序中使用jQuery mobile 1.3.1。

We use jQuery mobile 1.3.1 in the application.

修改

我发现了错误。似乎视口元元素的语义在iOS版本之间发生了变化。

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

更改

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

到

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

为我工作，但我不确定这是否是可行的方法，因为jQuery Mobile Demo 页面确实将with设置为device-with。当我从UIWebView加载Demo-Page时，我得到了同样的效果。

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.

是否有关于设置视口的正确方法的任何信息，特别是因为演示页面使用width = device-width

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

推荐答案

在iOS 7上，它已经改变了解释vieport元标记的方式。
在这里您可以找到解释 https://developer.apple.com/library/ios/releasenotes/General/RN-iOSSDK-7.0/#//apple_ref/doc/uid/TP40013202-CH1-SW75 。

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.

例如，如果你以width = device-width开始，然后将
更改为初始值-scale = 1.0，最终得到的计算视口为
width = device-width，initial-scale = 1.0。

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.

在iOS 7中，这有已经解决了。现在你得到一个初始比例= 1.0的计算
视口。

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

现在的问题是：这是怎么回事会影响iOS6上的布局<在Android设备上？

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

这篇关于过渡到iOS 7：在iPad上查看的jQuery / iPhone Webapps的正确视口设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！