WkwebView调节字体大小获取高度

2023-05-16

一般新闻阅读类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) {
        
    }];
}

这种方法也能修改字体大小，同样的，拿到的高度跟上面时一样的，从大到小底部会有大片留白

总结

比较以上几种方法，第一种方法效果还是不错的，但是总感觉追加一个定位标签可能会有什么隐患，还好目前没有?

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

WkwebView

调节字体大小获取高度