一般新闻阅读类APP都有一个功能是调节字体大小,而这类新闻界面一般是由webVIew来实现的,实际上就是怎么实时调节webView的字体大小。
写在前面
前后实验过大概有三四种方法,各有各自的优缺点,记录如下,不确保普遍适用,欢迎交流指正。追加定位标签
<body>
. . .
<!-- HTML结构 -->
<div id="test-div">
</div>
</body>
这个test-div
标签不显示任何内容,它的作用就是作为一个锚点,我们通过获取这个锚点在webView的位置,确定webView的高度。
在webView加载完毕后执行JavaScript
获取指定标签的位置
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
[webView evaluateJavaScript:@"document.getElementById(\"test-div\").offsetTop" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
CGFloat height = [result doubleValue];
NSLog(@"scrollHeight = %f", height);
[self.webView mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(height);
}];
}];
}
实际运用发现这种方法获取的高度还是蛮准确的,目前项目中采用的是这种方法。不管是字体从大调到小,还是从小调到大,都能获取到准确的高度。
修改css样式
<style type=\"text/css\">
*{
font-size:18.0px !important;
background: #ffff32 !important;
padding-right: 0px !important;
padding-left: 0px !important;
line-height: 1.7em !important
p{
margin-top:-5px !important;
}
body{
text-align:1.2px;
color: #4A4A4A;
}
</style>
只需要改变font-size:18.0px
这个值,然后把html字符串重新注入WkWebView。
offsetHeight/scrollHeight
相信这个方法大家都用过
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
[webView evaluateJavaScript:@"document.body.offsetHeight" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
CGFloat height = [result doubleValue];
NSLog(@"offsetHeight = %f", height);
}];
}
这种方法有个明显缺陷是,字体从小调到大时,OK,获取的高度没问题;但是你从大调到小时发现获取的高度几乎没有任何改变,这时候再拿来用会导致底部大片留白。
换成document.body.scrollHeight
结果也是一毛一样的。
后来了解到这种现象是:
字体从小到大时webView容器不够完全显示会重新排版,并更新自己的容器,此时我们拿到的高度都是准确的,但是当字体从大调到小时,webView容器足够完全显示所有内容,认为没必要去更新容器,导致我们获取的高度是之前的高度。
为了验证上面说法,我在每次html字符串重新注入之前将webView的高度置0,这时不管怎么调拿到的高度都是准确的,但是有个一闪的效果。。。
webkitTextSizeAdjust= ‘100%’"
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
//修改字体大小
[ webView evaluateJavaScript:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '100%'" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
}];
}
这种方法也能修改字体大小,同样的,拿到的高度跟上面时一样的,从大到小底部会有大片留白
总结
比较以上几种方法,第一种方法效果还是不错的,但是总感觉追加一个定位标签可能会有什么隐患,还好目前没有?