本文主要讲个人使用WKWebView遇到的几个问题。
1. viewport
在UIWebView使用loadHTMLString的html代码中不设置参数viewport,页面是没有问题的,但在WKWebView中,不设置就会页面看起来很小,换个说法就是能看到整个页面但字体很小,或者字体大小合适但不能看到整个页面。
关键就是viewport中的width默认是980左右的,viewport 的详细资料网上很多,我就粗略地这样解释,viewport可以理解为让网页在多宽的宽度内布局,大了网页就以为你是电脑屏幕,内容就多,文字相对小,而手机小屏幕要保证看得清字体,就要把viewport宽度调小,内容少,文字相对大。
常用的就是直接设置为device-width即可,
<head><meta name="viewport" content="width=device-width, initial-scale=1"></head>
2. 图片大小
请求下来的数据的img标签有的没设置大小,有的有设置style的大小但尺寸大过我们的屏幕。
我最终的解决办法:
<head><style>img{max-width:100% !important; height:auto !important;}</style><head>
*加上!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内核)