VisionOS中WKWebView全屏退出后尺寸异常问题求助

问题分析 #

在VisionOS窗口环境下使用WKWebView，开启isElementFullscreenEnabled支持网页全屏后，退出全屏时WebView尺寸会出现异常缩放，但窗口本身尺寸保持正常。这是因为WKWebView未正确绑定父视图的尺寸约束，全屏状态切换后没有自动重置布局以适配窗口。

解决方案 #

修改UIViewRepresentable的实现逻辑，确保WKWebView始终跟随父视图尺寸变化，并在全屏状态切换时强制触发布局更新：

优化后的完整代码 #

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        // 开启网页全屏支持
        webView.configuration.preferences.isElementFullscreenEnabled = true
        // 设置自动尺寸调整，跟随父视图宽高变化
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        // 禁用页面自动缩放，避免尺寸偏差
        webView.scalesPageToFit = false
        // 绑定协调器作为UI代理，监听全屏状态变化
        webView.uiDelegate = context.coordinator
        // 加载目标网页
        let request = URLRequest(url: url)
        webView.load(request)
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        // 每次视图更新时强制适配父视图边界
        uiView.frame = uiView.superview?.bounds ?? uiView.frame
        uiView.layoutIfNeeded()
    }
    
    // 创建协调器处理WKWebView的UI代理事件
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, WKUIDelegate {
        var parent: WebView
        
        init(_ parent: WebView) {
            self.parent = parent
        }
        
        // 监听网页退出全屏的事件
        func webViewDidExitFullscreen(_ webView: WKWebView) {
            DispatchQueue.main.async {
                // 退出全屏后立即刷新布局，强制适配窗口
                webView.frame = webView.superview?.bounds ?? webView.frame
                webView.layoutIfNeeded()
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        WebView(url: URL(string: "https://glitch.com/~fullscreen-test")!)
            .edgesIgnoringSafeArea(.all) // 让WebView填充整个窗口区域
    }
}

关键修改说明 #

• 设置autoresizingMask = [.flexibleWidth, .flexibleHeight]：让WKWebView自动响应父视图的尺寸变化，避免固定尺寸导致的偏差。
• 实现WKUIDelegate的webViewDidExitFullscreen方法：在网页退出全屏的精准时机触发布局刷新，解决延迟适配问题。
• 在updateUIView中强制更新frame和布局：确保每次视图状态变化时，WebView都能匹配当前窗口的实际尺寸。
• 添加edgesIgnoringSafeArea(.all)：消除窗口安全区的影响，让WebView完全填充窗口，减少尺寸适配的边界误差。

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