【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)