iOS WKWebView疑难杂症

本文主要讲个人使用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内核)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 移动前端开发之viewport的深入理解 一、viewport的概念 通俗的讲,移动设备上的viewport就是设...
    明明三省阅读 15,652评论 1 46
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,340评论 1 92
  • 雄雉于飞 新月山庄位处杭州东北,庄内规矩森严,门内弟子很少踏出庄外。 山庄庄主花子缎死后,众弟子纷纷逃散,青龙会随...
    一束冬阳阅读 988评论 0 0
  • 有多久没见到那个朋友了,今天恰巧在电影院的门口碰见,我因为答应了朋友来看电影可惜朋友迟迟未来,我不知道在哪里...
    Jawbo阅读 523评论 0 0

友情链接更多精彩内容