改变UIWebView的缩放系数

       最近项目中想使用uiwebview打开一个网页，我想让它支持手势，所以我设置myWebView.scalesPageToFit = YES，可是这个网页很大，设置完刚加入页面就看不清了。不设置这句话呢，页面大小是可以的，就是不支持手势了。

      有什么办法让打开的时候是初始网页大小，而且可以支持手势？（html是客户的，无法更改）

      后来发现UIWebView类没有修改缩放系数的方法，我们只能用HTML代码来做。很自然想到在UIWebView加载完成后使用js来给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代码如下：

increaseFactor.js:

function increaseFactor() {

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

   element.name = "viewport";

   element.content = "initial-scale=1";

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

   head.appendChild(element);

}

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

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

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

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

   [webViewstringByEvaluatingJavaScriptFromString:jsCode];

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

}

 

当从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将页面缩放得过多）。