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 Page确实将设置为设备。当我从UIWebView加载Demo-Page时，我得到了同样的效果。

是否有关于“正确方法”设置视口的信息，特别是因为演示页使用的是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，你最终得到了一个计算视口   width = device-width，initial-scale = 1.0。

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

现在的问题是：这将如何影响iOS6上的布局＆lt;在Android设备上？

Answer 2

我有一个只会在iOS7 iPad上“破解”的iPhone应用程序。从视口元标记中删除“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

我遇到了与手机带相同的问题，删除设备宽度并没有解决我的问题。

我不得不修改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语句之外的代码淡入淡出为＆lt; iOS7将保持不透明度0，否则

* END UPDATE *

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

然后缩小比例放大

最初在放大视图和缩小视图之间有一个跳转，所以我在css中将body的不透明度设置为0，在调整大小后设置为animated / faded in

过渡到iOS 7：在iPad上查看的jQuery / iPhone Webapps的正确视口设置

5 个答案: