改变UIWebView的缩放系数

 原文： http://www.icab.de/blog/2010/12/27/changing-the-range-of-the-zoom-factor-for-uiwebview-objects/

 

你在使用UIWebview显示网页时，可能会注意到，UIWebView所支持的缩放倍率是很有限的。而在Safari自己所支持的缩放系数比UIWebview要大得多。本文解释了如何加大UIWebView的缩放系数。

UIWebView类没有修改缩放系数的方法，我们只能用HTML代码来做。Meta标签可以设置viewport，而viewport就包含了初始化缩放系数的参数。

META标签如下所示：

<meta name="viewport"content="minimum-scale=0.6; maximum-scale=5;  initial-scale=1; user-scalable=yes; width=640">

可以使用的参数有：

• minimum-scale:
  允许缩放的最小倍数。默认为0.25，允许值为0－10。
• maximum-scale:
  运行缩放的最大倍数。默认1.6，允许值为0－10。
• initial-scale:
  当web页被加载，还未被用户缩放之前默认的缩放系数。默认值是自动根据页面大小和可用区域计算出来的，但这个值最终会在最小倍数到最大倍数之间。
• user-scalable
  是否运行用户缩放该web页。
• width:
  viewpoint的宽。默认为980像素（iPhone）。允许值为200－10000 。”device-width”表示设备宽度（iPhone为320，iPad为768）。注意device width不等于用户界面的宽度。设备宽度总是设备处于人像模式下的宽度（屏幕方向为正向）。如果我们想增加web页的最大缩放系数（默认1.6），我们只需要在HTML代码中增加META标签，指定maximum-scale属性即可。你可以直接在HTML源代码中加入META标签。如果web页来自internet并且无法修改HTML源代码，你可以用Javascript代码创建META标签并附加到web页的HTML代码中。读完剩下的内容，你就知道怎么做了。
• height:
  viewport的高。通常是根据width计算的。

JavaScript代码如下：

IncreaseZoomFactor.js:

function increaseMaxZoomFactor() {

   var element = document.createElement('meta');

   element.name = "viewport";

   element.content = "maximum-scale=10";

   var head = document.getElementsByTagName('head')[0];

   head.appendChild(element);

}

在webViewDidFinishLoad:委托方法中，你可以把这段JS代码加到web页中：

-(void)webViewDidFinishLoad:(UIWebView *)webView {

   NSString *path = [[NSBundle mainBundle]pathForResource:@"IncreaseZoomFactor" ofType:@"js"];

   NSString *jsCode = [NSStringstringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

   [webViewstringByEvaluatingJavaScriptFromString:jsCode];

    [webView stringByEvaluatingJavaScriptFromString:@"increaseMaxZoomFactor()"];

}

 

当从web加载web页时，你需要小心，因为许多web页已经使用META标签去改变了缩放系数或其他的viewport参数。如果你加入了新的META标签，你会覆盖这些缩放系数以及其他未参数。也就是说，如果在多个META标签中定义同一参数，那么最后一个定义生效。大部分时候这不会产生什么问题，但某些时候例外。

例如，如果web页定义了初始缩放系数4，由于web页没有定义maximum-scale参数，那么默认值1.6将限制初始缩放系数只能是1.6。现在，你加大了maximum-scale,initialzoom也会加大，因为原来的maximum-scale参数不能再限制它了。这会带来一个严重的后果，你需要检查其他参数并根据它们的值进行重新定义（例如，你需要将initial-scale定义为1.6以防止maximum-scale将页面缩放得过多）。