如何缩放WKWebView？加载本地HTML资源无法缩放问题求助

嘿，我之前也碰到过一模一样的情况——WKWebView加载本地HTML时默认不支持缩放，旧的UIWebView却能正常缩放，而且设置webView.contentMode = .scaleToFill完全没用对吧？别担心，这是因为WKWebView的缩放逻辑和UIWebView不一样，下面两个办法能帮你搞定：

1. 配置WKWebViewConfiguration开启缩放权限 #

WKWebView默认关闭了缩放功能，你需要在初始化WebView的时候通过WKWebViewConfiguration开启允许放大的设置，确保内部滚动视图能响应捏合手势：

func setUpWebView() {
    // 创建配置对象并开启缩放允许
    let webConfig = WKWebViewConfiguration()
    webConfig.allowsMagnification = true
    
    // 用配置好的对象初始化WKWebView
    webView = WKWebView(frame: view.bounds, configuration: webConfig)
    
    // 加载本地HTML资源
    guard let url = Bundle.main.url(forResource: "random", withExtension: "html") else { return }
    let request = URLRequest(url: url)
    webView.load(request)
    
    view.addSubview(webView)
}

这里的allowsMagnification是核心开关，设置为true后，WebView就会响应捏合手势进行缩放了。如果需要自定义缩放的最大/最小比例，还可以通过实现WKNavigationDelegate或者监听滚动视图代理来调整。

2. 给本地HTML添加Viewport Meta标签 #

WKWebView对网页的viewport规则遵循得更严格，很多时候光开WebView的配置还不够，需要在你的random.html的<head>部分添加viewport标签，明确告诉WebView允许用户缩放：

<head>
    <!-- 其他头部内容 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, minimum-scale=0.5, user-scalable=yes">
</head>

这个标签里的user-scalable=yes是关键，同时你可以通过maximum-scale和minimum-scale来限制缩放范围，让缩放行为更符合你的需求。

为什么contentMode没用？ #

顺便说一句，contentMode是UIView层面的布局属性，而WKWebView的缩放是由内部的UIScrollView和WebKit渲染引擎共同控制的，所以设置这个属性对Web内容的缩放完全不起作用，这也是正常的~

内容的提问来源于stack exchange，提问作者George