Flutter Webview 太宽显示不全解决方案

如果您的 Flutter 应用中的 webview 太宽而无法完全显示，您可以尝试以下方法来解决问题：

设置 webview 的宽度为屏幕的宽度，可以使用 MediaQuery 来获取屏幕宽度。例如：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatelessWidget {
  final String url;
  MyWebView({this.url});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Webview'),
      ),
      body: WebView(
        initialUrl: url,
        javascriptMode: JavascriptMode.unrestricted,
        // 设置 webview 的宽度为屏幕宽度
        initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
        javascriptChannels: <JavascriptChannel>[
          _toasterJavascriptChannel(context),
        ].toSet(),
        navigationDelegate: (NavigationRequest request) {
          if (request.url.startsWith('https://www.youtube.com/')) {
            print('blocking navigation to $request');
            return NavigationDecision.prevent;
          }
          print('allowing navigation to $request');
          return NavigationDecision.navigate;
        },
        onPageStarted: (String url) {
          print('Page started loading: $url');
        },
        onPageFinished: (String url) {
          print('Page finished loading: $url');
        },
        gestureNavigationEnabled: true,
      ),
    );
  }

  JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'Toaster',
        onMessageReceived: (JavascriptMessage message) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        });
  }
}

在 webview 中使用适当的 viewport 属性来控制 web 页面的宽度。例如：

<meta name='viewport' content='width=device-width, initial-scale=1.0'>

这将根据屏幕的宽度自动调整 web 页面的大小。如果您在使用 Flutter Webview 插件时遇到任何其他问题，可以查看官方文档或参考其他 Flutter Webview 教程以获取更多帮助。