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

Posted 2023-04-18

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

【英文标题】：Transition to iOS 7: correct viewport setting for jQuery/iPhone Webapps viewed on iPads

【发布时间】：2013-09-24 09:48:32

【问题描述】：

我们有一个应用程序，其本质上是一个 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

【问题讨论】：

好一个！这也为我解决了这个问题。你应该把它作为一个答案。

很高兴知道，但我想了解为什么会这样。如果一周左右没有人给出好的解释，我会把这个作为答案。

解决方案仅适用于 ipad 上的 iphone 应用，在其他设备上会破坏网页宽度。

【参考方案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

【讨论】：

我想重复一遍：>>hw 现在的问题是：这将如何影响 iOS6

【参考方案2】：

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

【参考方案3】：

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

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

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

【讨论】：

您找到解决方案了吗？我们遇到了同样的问题。

【参考方案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);

【讨论】：

你在哪里添加的？代码更改不是元。

【参考方案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，并在调整大小后动画/淡入

【讨论】：

我也对状态栏使用了这个修复***.com/questions/19209781/…