转载
最近公司需求，需要加载HTML标签，首选先来一段HTML标签
<p><span style="color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);">培训是给有经验或无经验的受训者传授其完成某种行为必需的思维认知、基本知识和技能的过程。基于认知心理学理论可知，职场正确认知（内部</span><a target="_blank" href="https://baike.baidu.com/item/%E5%BF%83%E7%90%86" style="color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, 宋体, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);">心理</a><span style="color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);">过程的输出）的传递效果才是决定</span><a target="_blank" href="https://baike.baidu.com/item/%E5%9F%B9%E8%AE%AD" style="color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, 宋体, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);">培训</a><span style="color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);">效果好坏的根本。</span></p>
这段标签可以直接用WebView加载，如下
[self.webView loadHTMLString:pxfxjs_app baseURL:nil];
但是有一个问题，加载出了以后，在显示时会发现文字特别小，而且WebView的滚动范围会超过界面宽带，如果有图片，图片宽带也有可能会超过屏幕宽度，所以需要添加标签适配，如下
//HTML适配图片文字
- (NSString *)adaptWebViewForHtml:(NSString *) htmlStr
{
NSMutableString *headHtml = [[NSMutableString alloc] initWithCapacity:0];
[headHtml appendString : @"<html>" ];
[headHtml appendString : @"<head>" ];
[headHtml appendString : @"<meta charset=\"utf-8\">" ];
[headHtml appendString : @"<meta id=\"viewport\" name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=false\" />" ];
[headHtml appendString : @"<meta name=\"apple-mobile-web-app-capable\" content=\"yes\" />" ];
[headHtml appendString : @"<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\" />" ];
[headHtml appendString : @"<meta name=\"black\" name=\"apple-mobile-web-app-status-bar-style\" />" ];
//适配图片宽度，让图片宽度等于屏幕宽度
//[headHtml appendString : @"<style>img{width:100%;}</style>" ];
//[headHtml appendString : @"<style>img{height:auto;}</style>" ];
//适配图片宽度，让图片宽度最大等于屏幕宽度
// [headHtml appendString : @"<style>img{max-width:100%;width:auto;height:auto;}</style>"];
//适配图片宽度，如果图片宽度超过手机屏幕宽度，就让图片宽度等于手机屏幕宽度，高度自适应，如果图片宽度小于屏幕宽度，就显示图片大小
[headHtml appendString : @"<script type='text/javascript'>"
"window.onload = function(){\n"
"var maxwidth=document.body.clientWidth;\n" //屏幕宽度
"for(i=0;i <document.images.length;i++){\n"
"var myimg = document.images[i];\n"
"if(myimg.width > maxwidth){\n"
"myimg.style.width = '100%';\n"
"myimg.style.height = 'auto'\n;"
"}\n"
"}\n"
"}\n"
"</script>\n"];
[headHtml appendString : @"<style>table{width:100%;}</style>" ];
[headHtml appendString : @"<title>webview</title>" ];
NSString *bodyHtml;
bodyHtml = [NSString stringWithString:headHtml];
bodyHtml = [bodyHtml stringByAppendingString:htmlStr];
return bodyHtml;
}
这样加上直接调用，就会自动适配文字，图片等大小了，如下
[self.webView loadHTMLString:[self adaptWebViewForHtml:pxfxjs_app] baseURL:nil];
另外在网上看了一下如果你想要把img标签里的图片换成你本地的图片的话，可以做以下处理,把img标签的src改成本地图片名称
<span><img src="[email protected]" alt="图片" /></span><span class="s4"><br><br></span>
然后baseURL改为图片路径，替换路径
NSString *resPath = [[NSBundle mainBundle] resourcePath];
NSString *htmlFilePath = [resPath stringByAppendingPathComponent:@"index.html"];
NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"image@3x" ofType:@"png"];
if ([[NSFileManager defaultManager] fileExistsAtPath:htmlFilePath]) {
NSString *string = [NSString stringWithContentsOfFile:htmlFilePath encoding:NSUTF8StringEncoding error:nil];
if (string) {
NSString *htmlString = string;
[_webView loadHTMLString:htmlString baseURL:[NSURL URLWithString:imagePath]];
}
作者：hanyongwei
链接：https://www.jianshu.com/p/13287ff0d788
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。