问题
原生项目中加载html页面,使用WKWebview的loadHTMLString属性加载html外部样式,iOS中用UIWebView的loadHTMLString后图片和文字失调，图片过大，超过屏幕，文字太小。或者图片太小。文字太大，总之就是不协调。
我们的需求是让图片的大小跟着屏幕的变化而变化。就是动态的去适应屏幕。那么文字的字体就是我们自己能够控制，可大可小。要想达到这种效果。我们要在用loadHTMLString载入字符串之前对它进行处理。
开始爬坑:
1.遵循代理 WKNavigationDelegate WKUIDelegate
2.- (void)viewDidLoad {
[super viewDidLoad];
self.wkWebView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
self.wkWebView.navigationDelegate = self;
self.wkWebView.scrollView.delegate = self;
self.wkWebView.UIDelegate = self;
NSString *html_str = [NSString stringWithFormat:@"<p>iPhone新品上市!</p><p><img src='http://mallres.lkkjjt.com/test_1620353949653' style='width: 548px;'></p><p>iPhone新品上市!iPhone新品上市!</p><p><img src='http://mallres.lkkjjt.com/test_1620353968737' style='width: 600px;'><br></p><p></p>"];
[self.wkWebView loadHTMLString:html_str baseURL:nil];
[self.view addSubview:self.wkWebView];
}
//获取加载的html页面的高度代理方法
- (void)webView:(WKWebView*)webViewdidFinishNavigation:(WKNavigation*)navigation {
[webViewevaluateJavaScript:@"document.body.scrollHeight" completionHandler:^(id result, NSError *_Nullable error) {
//result 就是加载完成后 webView的实际高度
//获取后返回重新布局
NSLog(@"%@",result);
self.wkWebView.frame = CGRectMake(0, 0, self.view.frame.size.width, [result integerValue]);
}];
}
结果显示如下:
显示的内容偏左边显示,右侧有留白,并是不想要的全屏显示效果;
第一种解决办法,(但没达到想要的效果,咨询前端的朋友说是内容设置了固定的宽,作为小白,没办法解决)
1.在初始化代码加入自适应内容
WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
WKUserContentController *content = [[WKUserContentController alloc]init];
// 自适应屏幕宽度js
NSString *jSString = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
WKUserScript *wkUserScript = [[WKUserScript alloc] initWithSource:jSString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
// 添加自适应屏幕宽度js调用的方法
[contentaddUserScript:wkUserScript];
wkWebConfig.userContentController= content;
self.wkWebView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) configuration:wkWebConfig];
然后显示如下:
图片是放大了,但是放的太大了,内容超出了屏幕的宽度,需要左右滑动才能看完整的内容;
2.查了很多资料,发现一个解决办法
原理就是用一个for循环，拿到全部的图片，对每一个图片都处理一次，让图片的宽为100%，就是依照屏幕宽度自适应。让图片的高atuo，自己主动适应。文字的字体大小，能够去改font-size:15px，这里我用的是15px。依据自己的详细需求去改吧。
NSString*htmls = [NSString stringWithFormat:@"<html> \n"
"<head> \n"
"<style type=\"text/css\"> \n"
"body {font-size:15px;}\n"
"</style> \n"
"</head> \n"
"<body>"
"<script type='text/javascript'>"
"window.onload = function(){\n"
"var$img= document.getElementsByTagName('img');\n"
"for(var p in$img){\n"
"$img[p].style.width = '100%%';\n"
"$img[p].style.height ='auto'\n"
"}\n""}"
"</script>%@"
"</body>"
"</html>",htmlString];
最终效果:
完美显示!
