ios wkweb设置图片_iOS WKWebView疑难杂症

本文主要讲个人使用WKWebView遇到的几个问题。

1. viewport

在UIWebView使用loadHTMLString的html代码中不设置参数viewport，页面是没有问题的，但在WKWebView中，不设置就会页面看起来很小，换个说法就是能看到整个页面但字体很小，或者字体大小合适但不能看到整个页面。

关键就是viewport中的width默认是980左右的，viewport 的详细资料网上很多，我就粗略地这样解释，viewport可以理解为让网页在多宽的宽度内布局，大了网页就以为你是电脑屏幕，内容就多，文字相对小，而手机小屏幕要保证看得清字体，就要把viewport宽度调小，内容少，文字相对大。

常用的就是直接设置为device-width即可，

2. 图片大小

请求下来的数据的img标签有的没设置大小，有的有设置style的大小但尺寸大过我们的屏幕。

我最终的解决办法：

*加上!important不管有没设置style都能强行设置。

*设置max-width:100%能让图片宽度最大只能是父元素宽度，小于父元素宽度的，没有设置大小的就会根据图片实际大小自己设置，有设置的就按设置的大小。

*height:auto 自动调整高度，不变形。

个人坑点：之前并不知道有这种操作，当时用了正则遍历html代码，修改style来防止图片过大，但效果并不好，因为混合了大图片和表情图片，不好确定该如何修改尺寸。

3.获取网页缓存图片资源

在UIWebView中，可以用NSURLCache根据url来获取网页缓存图片，然后就可以做图片浏览、保存等操作。但WKWebView我就没有找到直接获取的方法。可以使用js获取图片的base64编码，再把base64转化成图片。但服务器必须设置crossOrigin相关的参数，否则当你用canvas.toDataURL()获取图片base64编码时候会报错SecurityError: The operation is insecure。

如果你也使用WKWebView并且无法转换base64，那你只能根据图片地址费流量重新获取了，毕竟微信里浏览网页点击图片放大也是这样(微信iOS目前已是WKWebView内核)