Swift 3下如何在UIWebView中通过HTML字符串适配设备宽度调整图片尺寸？

嘿，我之前也碰到过一模一样的问题——在UIWebView里加载HTML字符串时，图片总是撑破屏幕或者显示不全，折腾了好一阵终于找到两个靠谱的解决办法，分享给你：

方法一：用内联CSS全局控制图片样式（最推荐） #

直接在你的HTML字符串开头插入一段CSS样式，强制让所有图片自适应容器宽度，高度自动缩放，这样不需要额外处理，加载HTML时就能直接生效：

// 假设你已经有要展示的原始HTML字符串
let originalHTML = "<p>这是一段带图片的HTML内容<img src='your-image-url' width='800'></p>"

func loadAdaptiveHTML(into webView: UIWebView, with originalHTML: String) {
    // 定义自适应图片的核心CSS
    let adaptiveCSS = """
    <style type="text/css">
        /* 强制图片自适应容器宽度，高度按比例缩放 */
        img {
            max-width: 100% !important;
            height: auto !important;
            box-sizing: border-box;
        }
        /* 给页面内容加一点边距，避免紧贴屏幕边缘 */
        body {
            margin: 12px;
            padding: 0;
            font-size: 16px;
        }
    </style>
    """
    
    // 把CSS和原始HTML拼接成最终的HTML字符串
    let finalHTML = adaptiveCSS + originalHTML
    
    // 加载到UIWebView
    webView.loadHTMLString(finalHTML, baseURL: nil)
}

// 调用方法
loadAdaptiveHTML(into: yourWebView, with: originalHTML)

小提示：!important是为了覆盖HTML中可能已经写死的图片固定宽度/高度，确保自适应样式能生效

方法二：通过JavaScript动态调整（适合已有固定样式的HTML） #

如果你的原始HTML里已经给图片设置了固定宽高，CSS可能覆盖不了，那可以在UIWebView加载完成后注入JavaScript，遍历所有图片强制修改样式：

首先要确保你的类遵循UIWebViewDelegate协议，并设置代理：

class YourViewController: UIViewController, UIWebViewDelegate {
    @IBOutlet weak var yourWebView: UIWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        yourWebView.delegate = self
        // 这里加载你的原始HTML
        yourWebView.loadHTMLString(originalHTML, baseURL: nil)
    }
}

然后实现代理方法，在页面加载完成后注入JS：

func webViewDidFinishLoad(_ webView: UIWebView) {
    // 遍历所有图片，设置自适应样式的JS代码
    let adjustImageJS = """
    var allImages = document.querySelectorAll('img');
    for (let img of allImages) {
        // 清除固定宽高，设置自适应规则
        img.removeAttribute('width');
        img.removeAttribute('height');
        img.style.maxWidth = '100%';
        img.style.height = 'auto';
    }
    """
    // 执行JS代码
    webView.stringByEvaluatingJavaScript(from: adjustImageJS)
}

额外提醒 #

虽然UIWebView在iOS 12之后被苹果标记为废弃，但既然你用的是Swift 3，应该是维护旧项目，这两个方法完全能满足需求。如果以后有机会升级到Swift 5+，可以考虑换成WKWebView，它的性能和兼容性更好，自适应图片的思路是类似的。

内容的提问来源于stack exchange，提问作者Saurabh Singh Rathore