【ios】【swift】WKWebView加载html自适应屏幕宽度、图片自适应、视频播放自适应以及禁用长按事件功能的实现

1. 应用场景

加载后端传来的html链接出现布局错乱的问题

2. 问题描述

1. html页面与屏幕宽度不符
2. 图片缩放比例不正确
3. 视频无法在非全屏的状态下播放，视频比例不正确
4. 长按事件禁用

3. 解决方法

通过webView的evaluateJavaScript()方法注入js代码解决适配问题。建议在

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)

代理方法中执行js代码。

1. html页面与屏幕宽度不符问题

        webView.evaluateJavaScript("""var oMeta = document.createElement('meta');oMeta.content = 'width=device-width, initial-scale=1, user-scalable=0';oMeta.name = 'viewport';document.getElementsByTagName('head')[0].appendChild(oMeta);""",completionHandler: nil)

2. 图片缩放比例不正确问题

        webView.evaluateJavaScript("""var imgs = document.getElementsByTagName("img")for (var i = 0; i < imgs.length; i++) {
    imgs[i].setAttribute('width', '100%')}""",completionHandler: nil)

3. 视频无法在非全屏的状态下播放，视频比例不正确问题

        webView.evaluateJavaScript("""var videos = document.getElementsByTagName("video")for (var i = 0; i < videos.length; i++) {
    videos[i].setAttribute('width', '100%')videos[i].setAttribute('height', '56.25%')videos[i].setAttribute('controls', '')videos[i].setAttribute('playsinline', 'true')videos[i].setAttribute('webkit-playsinline', 'true')}""",completionHandler: nil)

4. 长按事件禁用

 webView.evaluateJavaScript("document.documentElement.style.webkitTouchCallout='none';document.documentElement.style.webkitUserSelect='none';", completionHandler: nil)