改变UIWebView的缩放系数

来源:互联网 发布:java空格代码 编辑:程序博客网 时间:2024/05/02 06:04

 原文: 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将页面缩放得过多)。

 

 


原创粉丝点击