如何让Flutter WebView默认适配屏幕尺寸且支持用户手动缩放

核心修改点 #

针对你使用的flutter_webview_plugin库的WebviewScaffold组件，只需补充3个配置参数即可解决默认放大的问题：

• 新增useWideViewPort: true：开启宽视口支持，适配移动端页面渲染规则
• 新增loadWithOverviewMode: true：页面加载完成后自动缩放至完全适配WebView控件宽度
• 新增initialScale: 1：强制初始缩放比例为100%，无默认放大偏移
• 保留现有withZoom: true、displayZoomControls: true配置，不影响用户手动缩放能力

修改后的完整代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    bottomNavigationBar: _bottomTab(),
    appBar: AppBar(
      title: Text('View ' + type),
      actions: [
        IconButton(
            icon: Icon(Icons.print),
            onPressed: () {
              // getPermission('print');
              printPdfFile();
            }),
        IconButton(
            icon: Icon(Icons.edit),
            onPressed: () {
              navigateTo();
            }),
      ],
    ),
    body: Stack(
      children: <Widget>[
        Align(
          alignment: Alignment.center,
          child:
              Visibility(visible: true, child: CircularProgressIndicator()),
        ),

        Align(
          alignment: Alignment.center,
          child: Container(
            color: Colors.white,
            height: MediaQuery.of(context).size.height / 1.5,
            child: WebviewScaffold(
              url: weburl,
              displayZoomControls: true,
              withJavascript: true,
              withZoom: true,
              hidden: true,
              // 新增以下3行配置
              useWideViewPort: true,
              loadWithOverviewMode: true,
              initialScale: 1,
              // 可选：如果加载第三方页面不生效，增加onPageFinished回调注入JS修改视口
              onPageFinished: (url) async {
                await flutterWebviewPlugin.evalJavascript("""
                  let viewport = document.querySelector('meta[name=viewport]');
                  const content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes';
                  if (viewport) {
                    viewport.setAttribute('content', content);
                  } else {
                    const meta = document.createElement('meta');
                    meta.name = 'viewport';
                    meta.content = content;
                    document.head.appendChild(meta);
                  }
                """);
              },
            ),
          ),
        ),
      ],
    ),
  );
}

补充说明 #

如果你是自行开发的H5页面，也可以直接在H5的<head>标签中添加以下视口配置，双重保证适配效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes">

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