iOS端Flutter WebView加载iframe URL报错：maximum viewport inset can't be larger than frame

这个错误的核心原因是WebView的布局约束与内部视口计算冲突，你当前的代码里外层嵌套SingleChildScrollView+硬编码额外高度的Container，在iOS WebKit的渲染逻辑中会打乱视口尺寸的正常计算，进而触发该报错。以下是针对性的修复方案：

修复步骤 #

1. 移除冗余滚动容器：WebView本身自带滚动能力，外层的SingleChildScrollView会导致双重滚动冲突，直接移除。
2. 取消硬编码高度：删除height: MediaQuery.of(context).size.height+500的额外高度设置，让WebView适配屏幕尺寸即可。
3. 强制设置视口参数：通过注入JavaScript，确保iOS端WebKit正确识别视口配置，避免inset计算异常。
4. 规范导航委托逻辑：在navigationDelegate的分支中添加明确的返回值，避免重复加载或导航冲突。

修改后的代码示例 #

return Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  child: WebView(
    debuggingEnabled: false,
    javascriptMode: JavascriptMode.unrestricted,
    initialUrl: initial_url, // 直接使用组件自带的initialUrl更规范
    onWebViewCreated: (controller) {
      _webViewController = controller;
      // 注入JS强制设置视口参数，适配iOS WebKit
      _webViewController.runJavascript("""
        const viewportMeta = document.querySelector('meta[name="viewport"]');
        if (viewportMeta) {
          viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
        }
      """);
    },
    onWebResourceError: (error) {},
    navigationDelegate: (NavigationRequest request) {
      if (request.url.contains("https://accept.paymobsolutions.com/api/acceptance/mpgs_secure_callback/get_acs_page?token")) {
        _webViewController.loadUrl(request.url);
        return NavigationDecision.prevent; // 阻止默认导航，避免重复加载
      } else if (request.url.contains("success=true")) {
        if (widget.payment_type == "cart_payment") {
          OrderDone();
        } else if (widget.payment_type == "wallet_payment") {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return Wallet(from_recharge: true);
          }));
        }
        return NavigationDecision.prevent;
      } else if (request.url.contains("https://ordark.com/")) {
        ToastComponent.showDialog(
          AppLocalizations.of(context).common_payment_cancelled,
          context,
          gravity: Toast.CENTER,
          duration: Toast.LENGTH_LONG
        );
        Navigator.of(context).pop();
        return NavigationDecision.prevent;
      }
      return NavigationDecision.navigate; // 默认允许正常导航
    },
  ),
);

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