本文介绍了WKWebView在显示HTML内容时如何处理文本自动换行和图片适配屏幕大小的问题。通过设置WKWebView配置，插入JavaScript代码以实现自适应屏幕宽度，并在webView代理方法中调整图片大小。同时，对比了WKWebView与UIWebView在屏幕适配和CSS加载上的差异。
小弟在用webview的时候，显示的文本不会自动换行和字体显示过小，加载的图片没有按屏幕大小适配。
先来说说文本的自动换行：
html文本是直接从服务器获取的，就只有html文本，不带css格式不带js。
然后网上查找一番之后加入下面代码，并在原来的html文本基础上添加了css格式
<body width=device-width style=\"word-warp:break-word;font-family:Arial\">%@</body></html>
在body后面添加 width=device-width style=\"word-warp:break-word;font-family:Arial\" 实现自动换行
//WKWebView
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
WKUserContentController *userContentController = [[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调用的方法
[userContentController addUserScript:wkUserScript];
configuration.userContentController = userContentController;
WKPreferences *preferences = [WKPreferences new];
preferences.javaScriptCanOpenWindowsAutomatically = YES;
//设定最小字体
preferences.minimumFontSize = 50.0;
configuration.preferences = preferences;
WKWebView *webview = [[WKWebView alloc] initWithFrame:mScreenBounds configuration:configuration];
再来就说说图片的适配：
图片的时候需要在webview加载完之后执行代码，就是在webview的代理方法里添加：
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
weakSelf(weakSelf);
NSString *js = @"function imgAutoFit() { \
var maxwidth = %f;\
var imgs = document.getElementsByTagName('img'); \
for (var i = 0; i < imgs.length; ++i) {\
var img = imgs[i]; \
if(img.width > maxwidth){ \
img.width = maxwidth; \
}\
} \
}";
js = [NSString stringWithFormat:js, self.meetingContentWebView.bounds.size.width];
[webView evaluateJavaScript:js completionHandler:nil];
[webView evaluateJavaScript:@"imgAutoFit();"completionHandler:nil];
[webView evaluateJavaScript:@"document.body.offsetHeight;" completionHandler:^(id _Nullable any, NSError * _Nullable error) {
NSString *heightStr = [NSString stringWithFormat:@"%@",any];
weakSelf.meetingContentWebViewHeightConstraint.constant = heightStr.floatValue + 100.0f;
}];
}
另外说一下小弟在遇到的坑：
1、uiwebview不需要像wkwebview那样繁琐的设置就可以实现屏幕适配和自动换行，还有就是可以成功加载css格式。直接把css写在htmlString里用loadHtmlString方法，或者通过外部css样式表格式化都可以
直接在htmlString里面写：
<style>
.testt{
color: red;
border: solid 2px green;
font-size: 20px;
}
</style>
<body>
<blockquote>
<p class="testt">jkghkghjkgjh</p>
</blockquote>
</body>
外部加载css格式表：
<link rel="stylesheet" type="text/css" href="/Users/totin/Library/Developer/CoreSimulator/Devices/3643EC50-8176-4BFB-90FF-AAF401492A4D/data/Containers/Bundle/Application/06AD705B-9857-4E30-BDE0-711C939C59B2/Thinkine.app/GitHub2.css"/>
（但是外部加载需要注意的是，css文件不能放在项目的nsbundle mainbundle下面，需要把css文件复制到tmp里）
可以参考一下这个帖子： http://www.jianshu.com/p/ccb421c85b2e
2、wkwebview无法加载css格式，无论是通过外部css样式表格式化的还是直接写在htmlString里的css格式都没法显示出来，这个我也找不到原因，需要继续研究。
扫一扫
1427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
