iOS-WKWebView 加载HTML字符自适应文字和图片

Arce

加载HTML字符串内容时，字体自适应屏幕问题处理，在创建 WKWebView 时，注入相关的js：

WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
NSString *jSString = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
WKUserScript *script = [[WKUserScript alloc] initWithSource:jSString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];

对于图片处理，只需要给图片一个最大的宽度，也就是屏幕宽度或相对最大宽度，让图片自适应，超过最大宽度，让图片宽度等于最大宽度，其余的情况不做处理，图片高度自适应

NSString *htmlString = [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"
              "var maxWidth = %f;\n"
              "for(var k in  $img){\n"
              "if($img[k].width> maxWidth){\n"
              " $img[k].style.width = maxWidth;\n"
              "}\n"
              "$img[k].style.height ='auto'\n"
              "}\n"
              "}"
              "</script>%@"
              "</body>"
              "</html>", _maxWidth,string];
  
  [self.webView loadHTMLString:htmlString baseURL:nil];

[iOS开发] iOS-WKWebView 加载HTML字符自适应文字和图片

相关帖子

教你使用HTML/CSS和Three.js的喷火龙小游戏

基于 HTML+CSS+JS 的石头剪刀布游戏

JavaScript怎样实现点击出现图片效果

HTML/JS/PHP网站底部获取当前年份代码

html+Js获取当前时间代码

nginx启ssi方法，宝塔面板nginx开启ssi

常用HTML网页跳转的几种方法

CSS3荧光灯文字闪烁动画特效

利用html+js触发弹窗事件

利用HTML、CSS和JS制作随机密码生成器

Arce LV4