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

Question

我们有一个应用程序，其本质上是一个 UIWebView，它在 XCode 中设置为“iPhone App”。

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

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

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

编辑

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

变化

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

到

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

为我工作，但我不确定这是否是要走的路，因为jQuery Mobile Demo 页面确实将 with 设置为 device-with。当我从 UIWebView 加载演示页面时，我得到了相同的效果。

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

Answer 1

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

以前，当修改视口参数时，从不丢弃旧参数。 这导致视口参数是相加的。

例如，如果您从 width=device-width 开始，然后更改 它到初始比例= 1.0，你最终得到一个计算的视口 宽度=设备宽度，初始比例=1.0。

在 iOS 7 中，此问题已得到解决。现在你最终得到一个计算的 initial-scale=1.0 的视口。

现在的问题是：这将如何影响 iOS6

Answer 2

我有一个 iPhone 应用程序，它只会在 iOS7 iPad 上“崩溃”。从视口元标记中删除“width=device-width”修复了它。

Answer 3

我使用了你的答案，但它并没有解决我所有的问题。 初始大小保持 ipad 的宽度而不是 iphone 的宽度。

此外，当我尝试在文本上书写时，屏幕会自行缩放以填充文本框，并且只有当我按下完成时，屏幕才会重新调整到合适的 iphone 尺寸。

我仍然需要一个适当的解决方案。

Answer 4

我的答案是最好的，你可以试试，应该兼容ios5/ios6/ios7包括android

代码：

<meta content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0" name="viewport" />

iOS7 uiwebview 可能要改变高度：

代码：

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

Answer 5

我在 phonegap 上遇到了同样的问题，删除 device-width 并没有解决我的问题。

我不得不修改 Classes/MainViewController.m

我修改了：

- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
    // Black base color for background matches the native apps
    theWebView.backgroundColor = [UIColor blackColor];

    return [super webViewDidFinishLoad:theWebView];
}

成为：

- (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];
}

* 更新 *

- (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];
}

我将淡入代码移到 if 语句之外，因为

* 结束更新 *

我使用“版本”变量和 if 语句来定位 iOS 7。感谢@leetvin

然后从放大缩小比例

最初在放大视图和缩小视图之间存在跳跃，因此我在 css 中将 body 的不透明度设置为 0，并在调整大小后动画/淡入