UIWebView在修改字体大小出现闪烁及取消放缩效果

来源：互联网发布：mac里的视频导出到u盘编辑：程序博客网时间：2024/06/02 03:32

问题：在用webview加载html字符串，如果想改变字体的大小一般有两个方法，一个是在webview的代理方法中用js代码修改：
-(void)webViewDidFinishLoad:(UIWebView *)webView

[webView stringByEvaluatingJavaScriptFromString:@”document.getElementsByTagName(‘body’)[0].style.webkitTextSizeAdjust= ‘40%’”];
}
二是在html拼接字符串时在标签中修改：

    NSMutableString * html = [NSMutableString string];    [html appendString:@"<html>"];    NSString * imgStr = [NSString stringWithFormat:@"<head><style>img{width:%fpx !important;}</style>",imgWidth];    [html appendString:imgStr];    [html appendFormat:@"<link rel=\"stylesheet\" href=\"%@\">",[[NSBundle mainBundle] URLForResource:@"SXDetails.css" withExtension:nil]];    [html appendString:@"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"></head>"];    NSString * string = [NSString stringWithFormat:@"<body class=\"title\" style=\"background:#ffffff ; font-size:%zdpx\">",fontSize];    [html appendString:string];    [html appendString:[self touchBody:content]];    [html appendString:@"</body>"];    [html appendString:@"</html>"];    dispatch_async(dispatch_get_main_queue(), ^{        [self.webView loadHTMLString:html baseURL:nil];    });其中fondSize就是要传入的字体大小。

这时我们就可以随意的改变字体大小了，但是我们不需要webview放缩效果，怎么把放缩效果禁掉呢？还是有两个方法。一个是在webview的代理方法中实现：

    //取消webview的放缩效果    NSString *injectionJSString = @"var script = document.createElement('meta');"    "script.name = 'viewport';"    "script.content=\"width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\";"    "document.getElementsByTagName('head')[0].appendChild(script);";    [self.webView stringByEvaluatingJavaScriptFromString:injectionJSString];

二是在标签中实现：

<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"></head>在<head>标签中添加<meta>

总结：如果用第一种方法取消放缩效果，你会发现当你改变字体大小时，webview会闪一下，就是先回到很小的字体饭后闪回你要改变的字体大小，用久了，会闪瞎你的眼，哈哈，这个体验特别不好。当你用第二种方法取消放缩效果时，就没有那个闪烁过程。就解决这个问题。如有问题请加QQ讨论：1067452293。

阅读全文

1 0