如何在WKWebView中实现Safari同款50%缩放效果

你之前尝试的两种方法无法匹配Safari效果的原因：

• webView.pageZoom = 0.5：iOS平台下WKWebView的该属性支持有限，且极易受网页自身viewport配置影响，无法对齐Safari的缩放逻辑。
• 设置scrollView.minimumZoomScale/maximumZoomScale：这是对WebView视图层级的缩放，而非网页内容本身的缩放，和Safari的页面缩放机制完全不同，因此显示效果不一致。

以下是两种可行的实现方案：

方案一：注入JavaScript实现精准缩放（推荐） #

通过注入JS直接调整网页内容的缩放比例，完全匹配Safari的页面缩放行为，兼容性覆盖全iOS版本：

在网页加载完成后（例如在webView(_:didFinish:)代理方法中）执行以下代码：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 基础缩放实现
    webView.evaluateJavaScript("document.documentElement.style.zoom = '50%';") { _, error in
        if let error = error {
            print("缩放JS执行失败：\(error)")
        }
    }
    
    // 若出现布局偏移，使用transform方式优化
    // webView.evaluateJavaScript("""
    //     const htmlEl = document.documentElement;
    //     htmlEl.style.transform = 'scale(0.5)';
    //     htmlEl.style.transformOrigin = 'top left';
    //     htmlEl.style.width = '200%';
    //     htmlEl.style.height = '200%';
    // """) { _, error in
    //     if let error = error {
    //         print("缩放JS执行失败：\(error)")
    //     }
    // }
}

同时需要禁用WebView视图层级的缩放，避免冲突：

webView.scrollView.minimumZoomScale = 1.0
webView.scrollView.maximumZoomScale = 1.0
webView.scrollView.bouncesZoom = false

方案二：iOS 15+专属配置 #

如果你的应用仅支持iOS 15及以上版本，可以通过WKWebView配置直接设置页面缩放：

let config = WKWebViewConfiguration()
if #available(iOS 15.0, *) {
    config.defaultWebpagePreferences.pageZoom = 0.5
}
let webView = WKWebView(frame: view.bounds, configuration: config)

注意：该方法受网页的viewport设置限制，如果网页声明了user-scalable=no，则该配置可能无法生效，此时仍需使用方案一。

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