首页 » iOS 开发 » UIWebview按比例缩放

UIWebview按比例缩放

作者: 低调的术木 分类: iOS 开发 发布时间: 2013-04-01 21:34 ė浏览 2,678 次 6没有评论

你在使用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将页面缩放得过多)。

本文出自 蓝天笔记,转载时请注明出处及相应链接。

本文永久链接: http://ubluesky.com/archives/103

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ɣ回顶部