UIWebView -- 加载外部网站，以编程方式设置初始缩放比例，然后允许用户缩放答案

【问题标题】：UIWebView -- load external website, programmatically set initial zoom scale, and allow user to zoom afterwardsUIWebView -- 加载外部网站，以编程方式设置初始缩放比例，然后允许用户缩放
【发布时间】：2011-12-24 02:12:10
【问题描述】：

以上都可以吗？ SO 给了我一个很好的方法来设置初始缩放比例here。即，在我的 webViewDidFinishLoad 方法中包含以下行：

[webView stringByEvaluatingJavaScriptFromString: @"document.body.style.zoom = 5.0;"];

但我仍然不能做的是允许用户在程序初始设置后更改缩放比例。如果我将 scalePagesToFit 设置为 NO，则用户无法更改缩放比例。如果我将 scalePagesToFit 设置为 YES，它会覆盖我的程序化缩放。

谁能帮忙？

编辑：感谢您的回复。但是如果我缩放滚动视图，事情会变得有点模糊。

【问题讨论】：

标签： iphone ios uiwebview zooming

【解决方案1】：

从 iOS 5.x 开始似乎可以访问底层 UIScrollView。

在webViewDidFinishLoad: 中，您可以请求缩放，例如：

[webView.scrollView zoomToRect:CGRectMake(0.0, 0.0, 50.0, 50.0) animated:YES];

即使将scalesPageToFit 设置为YES，这似乎也有效。

【讨论】：

【解决方案2】：

尝试更改您设置这些命令的顺序 - 首先将 scalePagesToFit 设置为 YES，然后：

[webView stringByEvaluatingJavaScriptFromString: @"document.body.style.zoom = 5.0;"];

【讨论】：

【解决方案3】：

您可以添加或修改<meta name='viewport' 标记来实现此目的。关于 meta/viewport 标签的 Apple 文档：

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

这是一个加载文档后添加标签的示例：

- (void) webViewDidFinishLoad:(UIWebView *)webView
{
    NSString* js = 
    @"var meta = document.createElement('meta'); " \
     "meta.setAttribute( 'name', 'viewport' ); " \
     "meta.setAttribute( 'content', 'width = device-width, initial-scale = 5.0, user-scalable = yes' ); " \
     "document.getElementsByTagName('head')[0].appendChild(meta)";

    [webView stringByEvaluatingJavaScriptFromString: js];        
}

如果您正在加载的网页提供了现有的元标记，您可能需要对其进行修改，而不是尝试向 DOM 添加新的元元素。这个 SO 问题讨论了该技术：

Can I change the viewport meta tag in mobile safari on the fly?

在我的测试应用程序中，我将 UIWebView scalesPageToFit 设置为 YES。

【讨论】：

在重新设置属性之前还应该清除视口：[webView stringByEvaluatingJavaScriptFromString: @"$('meta[name=viewport]').remove();"];
在将 JS 字符串跨越多行时，您不需要反斜杠 (\) 这一事实。唯一的要求是用引用标记 ( " ) 打开和关闭每个新句子。

【解决方案4】：

这真是太棒了。我需要有缩放功能，而 scalePagesToFit 是 NO。尽管您的代码 TomSwift 没有按我的需要运行，但稍微调整一下就可以了。

我在 iOS 6.x 上运行它...就像一个魅力。

NSString* js =
        @"var meta = document.createElement('meta'); " \
        "meta.setAttribute( 'name', 'viewport' ); " \
        "meta.setAttribute( 'content', 'width = device-width, initial-scale=1.0, minimum-scale=0.2, maximum-scale=5.0; user-scalable=1;' ); " \
        "document.getElementsByTagName('head')[0].appendChild(meta)";

[webView stringByEvaluatingJavaScriptFromString: js];

很棒的提示汤姆。

【讨论】：

【解决方案5】：

与我的回答不同的是，您在设置宽度之前要清除视口。

这允许在不重置属性更改的情况下旋转或调整 Web 视图的大小（加载后）。

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    // Clear view port
    NSString* js = @"$('meta[name=viewport]').remove();";
    [webView stringByEvaluatingJavaScriptFromString: js];

    // Set content size
    js = [NSString stringWithFormat:@"var meta = document.createElement('meta');"
          "meta.setAttribute( 'name', 'viewport' ); "
          "meta.setAttribute( 'content', 'width = device-width, initial-scale = 5.0, user-scalable = yes' ); "
          "document.getElementsByTagName('head')[0].appendChild(meta);"];

    [webView stringByEvaluatingJavaScriptFromString: js];
}

【讨论】：