Flutter中如何禁用WebView默认缩放控制 初始打开页面不自动缩放

解决方法 #

你可以通过组合webview_flutter的原生配置参数 + 页面加载完成后注入JS修改viewport的方式实现需求，步骤如下：

步骤1：添加WebView基础缩放配置 #

在你现有WebView组件中新增以下4个配置参数：

• useWideViewPort: true：开启宽视口支持，对应安卓原生WebView的setUseWideViewPort配置
• loadWithOverviewMode: true：页面加载时以完整宽度适配屏幕，避免默认放大行为
• zoomEnabled: true：总缩放开关开启，允许用户手动缩放
• displayZoomControls: false：隐藏安卓端默认的浮动缩放按钮（可选，按需开启）

步骤2：页面加载完成后注入JS修改viewport配置 #

很多网页自带的viewport标签会触发自动缩放，你需要在pageFinishedLoading回调中注入JS代码，覆盖原页面的viewport规则，强制初始缩放比例为1，同时允许用户手动调整缩放。

修改后的完整代码 #

import 'package:webview_flutter/webview_flutter.dart';
// 其他原有导入保持不变

// 3.0+版本webview_flutter提前定义controller
late WebViewController webViewController;

@override
Widget build(BuildContext context) {
  return WillPopScope(
      child: Scaffold(
          backgroundColor: Colors.white,
          bottomNavigationBar: _bottomTab(),
          appBar: AppBar(
            title: Text('View ' + type),
          ),
          body: ProgressHUD(
            child: Padding(
              padding: EdgeInsets.all(10.0),
              child: Stack(
                children: <Widget>[
                  Container(
                    child: WebView(
                      initialUrl: weburl,
                      javascriptMode: JavascriptMode.unrestricted,
                      onPageFinished: pageFinishedLoading,
                      // 新增缩放相关配置
                      useWideViewPort: true,
                      loadWithOverviewMode: true,
                      zoomEnabled: true,
                      displayZoomControls: false,
                      // 新增获取controller回调
                      onWebViewCreated: (controller) {
                        webViewController = controller;
                      },
                    ),
                  )
                ],
              ),
            ),
            inAsyncCall: _isLoading,
            opacity: 0.0,
          )),
      onWillPop: backPress);
}

void pageFinishedLoading(String url) async {
  setState(() {
    _isLoading = false;
  });
  // 注入JS修改viewport，强制初始缩放为1，允许用户手动缩放
  await Future.delayed(const Duration(milliseconds: 100));
  webViewController.runJavaScript('''
    (function() {
      var meta = document.querySelector('meta[name="viewport"]');
      if (!meta) {
        meta = document.createElement('meta');
        meta.name = 'viewport';
        document.head.appendChild(meta);
      }
      meta.content = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes';
    })();
  ''');
}

// 原有ProgressHUD类代码保持不变
class ProgressHUD extends StatelessWidget {
  final Widget child;
  final bool inAsyncCall;
  final double opacity;
  final Color color;
  final Animation<Color> valueColor;

  ProgressHUD({
    Key? key,
    required this.child,
    required this.inAsyncCall,
    this.opacity = 0.3,
    this.color = Colors.grey,
    this.valueColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Widget> widgetList = <Widget>[];
    widgetList.add(child);
    if (inAsyncCall) {
      final modal = Stack(
        children: [
          Opacity(
            opacity: opacity,
            child: ModalBarrier(dismissible: false, color: color),
          ),
          Center(
            child: CircularProgressIndicator(
              valueColor: valueColor,
            ),
          ),
        ],
      );
      widgetList.add(modal);
    }
    return Stack(
      children: widgetList,
    );
  }
}

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