WKWebView加载网页/富文本时，针对图片尺寸过大的处理

在项目中，经常会遇到需要加载网页的情况。而这些内容可能不只有文字，还会有图片等信息，若是不做处理，直接用WKWebView加载的话，界面往往不是那么好看，甚至会给用户视觉混乱的感觉。如果单单指望网页开发人员去处理，那显然是不够的，我们自己也需要去适配界面

网页内容的整体尺寸适配

对html的head添加相应代码

let conf = WKWebViewConfiguration()
//关键代码
var jsString = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'device-width=width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0'); document.getElementsByTagName('head')[0].appendChild(meta);"
let wkUserScript = WKUserScript(source: jsString, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
conf.userContentController = WKUserContentController()
conf.userContentController.addUserScript(wkUserScript)
let webView = WKWebView(frame: self.view.bounds, configuration: conf)

这样再用webView加载网页，其内容就会适配手机的尺寸，字体大小就没问题了

图片处理

对于包含图片的网页，只做上面的处理可能会仍有问题了。比如网页中对某些图片的大小尺寸做出了具体设置(比如width：1000px;height:800px)，此时图片尺寸1000px显然会大于多数设备的宽度，界面就会出现左右滑动的效果，会给客户一种不好的体验效果。我这里也有两种方案：

1. 让提供网页的同事去调整下，要么将图片尺寸改小点，要么将其width设置为百分比模式。这样我们就不用改动了😄。但是如果网页不能动（需求按设计样式、或者其他第三方提供的网页），那这种方法就没用了。

2. 注入js代码

对图片控件（img）尺寸进行调整，怎么调整呢？

如果直接设置img{width:100% !important;height:auto}的话就太绝对了，因为有些图片的尺寸其实并不需要填满全屏（比如用户头像等）。

如果在遍历网页中的img控件后再去调整尺寸过大的图片。这种方案理论上可能行，但是我没试过，感觉太麻烦了😂

好吧，最终我选的了修改max-width这个样式。这个属性会限制图片的最大宽度，很符合我的需求

最终的代码

let conf = WKWebViewConfiguration()
// 整体尺寸
var jsString = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'device-width=width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0'); document.getElementsByTagName('head')[0].appendChild(meta);"
// 图片控制
jsString += """
            var style = document.createElement('style');
            style.innerHTML = "img{max-width:100%;height:auto}";
            document.getElementsByTagName('head')[0].appendChild(style);
            """
let wkUserScript = WKUserScript(source: jsString, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
conf.userContentController = WKUserContentController()
conf.userContentController.addUserScript(wkUserScript)
let webView = WKWebView(frame: self.view.bounds, configuration: conf)

؏؏☝ᖗ乛◡乛ᖘ☝؏؏