使用WKWebView自适应屏幕遇到的问题以及最后解决的方法

Posted 2023-03-21

参考技术A 在网上找了很多方法我就不废话了 先一一列举出来
第一种方法：这种方法适配屏幕不是太好，双击才可以完全适配屏幕，有兴趣的话可以自己试一下

第二种方法：

在初始化WKWebView的时候添加配置可以解决自适应的问题 ，但是在加载的内容宽度大于高度的时候就有些不准确了，宽度无法自适应屏幕的宽度，最后我也没搞明白是因为什么原因，最后就放弃了这个方法。

//自适应屏幕宽度js

在加载的过程中我使用KVO监听加载的进度，从而获取最后加载内容的高度。

根据WKWebView的状态去判断是否加载完成：

有可能需要用到进度条和title属性

一定一定要记得移除KVO监听

第三种方法 也是我最后使用的方法：
我的需求是让图片的大小跟着屏幕的变化而变化，就是动态的去适应屏幕；那么文字的字体就是自己可以控制，可大可小。要想达到这样的效果，在用loadhtmlString加载字符串之前对它进行处理

处理HTMLString的原理：
原理就是用一个for循环，拿到所有的图片，对每个图片都处理一次，让图片的宽为100%，就是按照屏幕宽度自适应；让图片的高atuo，自动适应。文字的字体大小，可以去改font-size:14px