过渡到 iOS 7:在 iPad 上查看的 jQuery/iPhone Web 应用程序的正确视口设置

Transition to iOS 7: correct viewport setting for jQuery/iPhone Webapps viewed on iPads(过渡到 iOS 7:在 iPad 上查看的 jQuery/iPhone Web 应用程序的正确视口设置)

问题描述

我们有一个应用程序，其本质上是一个 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 Page 确实将 with 设置为 device-with.当我从 UIWebView 加载演示页面时，我得到了相同的效果.

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 开始，然后更改它到初始比例= 1.0，你最终得到一个计算的视口宽度=设备宽度，初始比例=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 中，此问题已得到解决.现在你最终得到一个计算的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.

现在的问题是:这将如何影响 iOS6 上的布局<在 Android 设备上?

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

这篇关于过渡到 iOS 7:在 iPad 上查看的 jQuery/iPhone Web 应用程序的正确视口设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！