你在使用UIWebview显示网页时,可能会注意到,UIWebView所支持的缩放倍率是很有限的。而在Safari自己所支持的缩放系数比UIWebview要大得多。本文解释了如何加大UIWebView的缩放系数。
UIWebView类没有修改缩放系数的方法,我们只能用HTML代码来做。Meta标签可以设置viewport,而viewport就包含了初始化缩放系数的参数。
META标签如下所示:
可以使用的参数有:
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将页面缩放得过多)。