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

如题所述

第1个回答  2022-06-07
在网上找了很多方法我就不废话了 先一一列举出来
第一种方法:这种方法适配屏幕不是太好,双击才可以完全适配屏幕,有兴趣的话可以自己试一下

第二种方法:

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

//自适应屏幕宽度js

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

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

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

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

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

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