25

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

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

4

5 回答 5

12

在 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 开始，然后将其更改为 initial-scale=1.0，则最终得到的计算视口为 width=device-width，initial-scale=1.0。

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

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

于 2013-09-30T07:12:52.703 回答
4

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

于 2013-10-16T16:14:00.117 回答
1

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

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

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

于 2013-09-24T18:40:28.857 回答
1

我的回答是最好的，你可以试试，应该兼容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 可能要改变高度：</p>

代码：

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);
}
于 2013-10-08T03:29:16.880 回答
1

我在 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 语句之外，否则 < iOS7 将保持不透明度 0

* 结束更新 *

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

然后从放大缩小比例

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

于 2013-11-15T14:14:31.063 回答