問題
? ? 原生項目中加載html頁面,使用WKWebview的loadHTMLString屬性加載html外部樣式,iOS中用UIWebView的loadHTMLString后圖片和文字失調(diào)，圖片過大，超過屏幕，文字太小?；蛘邎D片太小。文字太大，總之就是不協(xié)調(diào)。
我們的需求是讓圖片的大小跟著屏幕的變化而變化。就是動態(tài)的去適應(yīng)屏幕。那么文字的字體就是我們自己能夠控制，可大可小。要想達到這種效果。我們要在用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]);
? ? }];
}
結(jié)果顯示如下:
顯示的內(nèi)容偏左邊顯示,右側(cè)有留白,并是不想要的全屏顯示效果;?
第一種解決辦法,(但沒達到想要的效果,咨詢前端的朋友說是內(nèi)容設(shè)置了固定的寬,作為小白,沒辦法解決)
1.在初始化代碼加入自適應(yīng)內(nèi)容
WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
WKUserContentController *content = [[WKUserContentController alloc]init];
// 自適應(yīng)屏幕寬度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];
// 添加自適應(yīng)屏幕寬度js調(diào)用的方法
[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];
然后顯示如下:
圖片是放大了,但是放的太大了,內(nèi)容超出了屏幕的寬度,需要左右滑動才能看完整的內(nèi)容;
2.查了很多資料,發(fā)現(xiàn)一個解決辦法
原理就是用一個for循環(huán)，拿到全部的圖片，對每一個圖片都處理一次，讓圖片的寬為100%，就是依照屏幕寬度自適應(yīng)。讓圖片的高atuo，自己主動適應(yīng)。文字的字體大小，能夠去改font-size:15px，這里我用的是15px。依據(jù)自己的詳細需求去改吧。
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];
最終效果:
完美顯示!
