iPad Pro上WKWebView与Mobile Safari浏览器尺寸不匹配问题

问题原因 #

WKWebView默认初始化时未配置适配全屏的视口参数，也未设置正确的视图自适应规则，导致视口尺寸被限制为传统iPad的1024x768逻辑分辨率；而Mobile Safari会自动适配设备的真实全屏逻辑尺寸，默认视口配置更贴合设备屏幕，因此出现尺寸差异。

解决方法 #

需要从三个维度调整WKWebView配置，使其匹配Mobile Safari的视口表现：

• 初始化时设置视图自适应规则，确保WebView填充父视图
• 配置WKWebViewConfiguration，启用JavaScript并注入视口设置脚本
• 关闭滚动视图的安全区域调整，避免有效显示区域被挤压

修改后的代码 #

// ContentView.swift
import SwiftUI
import WebKit

struct ContentView: View {
    private let urlString: String = "https://browsersize.com/"
    var body: some View {
        WebView(url: URL(string: urlString)!)
            .ignoresSafeArea()
    }
}

struct WebView: UIViewRepresentable {
    var url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        // 创建配置对象并启用JavaScript
        let config = WKWebViewConfiguration()
        config.preferences.javaScriptEnabled = true
        
        // 注入视口设置脚本，强制网页适配设备宽度
        let viewportScript = WKUserScript(
            source: """
            var meta = document.createElement('meta');
            meta.setAttribute('name', 'viewport');
            meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
            document.head.appendChild(meta);
            """,
            injectionTime: .atDocumentStart,
            forMainFrameOnly: true
        )
        config.userContentController.addUserScript(viewportScript)
        
        // 创建WebView并设置自适应规则
        let webView = WKWebView(frame: .zero, configuration: config)
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        // 关闭安全区域调整，避免视图尺寸被挤压
        webView.scrollView.contentInsetAdjustmentBehavior = .never
        
        return webView
    }
    
    func updateUIView(_ webView: WKWebView, context: Context) {
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

补充说明 #

• 注入的脚本会在页面加载前添加正确的viewport元标签，确保网页以设备的真实逻辑宽度渲染
• autoresizingMask配置让WebView自动填充父视图的尺寸，保证全屏显示
• contentInsetAdjustmentBehavior = .never用于关闭滚动视图的安全区域适配，避免有效显示区域被缩小

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