如何让webview_flutter启用wide viewport实现网页全屏显示

webview_flutter启用wide viewport解决方案 #

针对Android平台 #

webview_flutter 3.0及以上版本

可直接通过平台专属控制器配置原生参数：

import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

late final WebViewController webViewController;

@override
void initState() {
  super.initState();
  webViewController = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted);

  // 仅对Android平台生效
  if (WebViewPlatform.instance is AndroidWebViewPlatform) {
    final androidController = webViewController.platform as AndroidWebViewController;
    // 核心配置，启用wide viewport
    androidController.androidWebView.settings.setUseWideViewPort(true);
    // 建议搭配开启，让页面内容自动适配WebView宽度
    androidController.androidWebView.settings.setLoadWithOverviewMode(true);
  }

  webViewController.loadRequest(Uri.parse('你的Wix站点地址'));
}

webview_flutter 2.x及更早版本

需要手动修改Android原生侧的WebView初始化逻辑：

1. 打开项目路径下的android/app/src/main/kotlin/[你的应用包名]/MainActivity.kt文件
2. 重写配置方法注入自定义参数：

import android.content.Context
import android.webkit.WebView
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.BinaryMessenger
import io.flutter.plugin.common.StandardMessageCodec
import io.flutter.plugin.platform.PlatformView
import io.flutter.plugin.platform.PlatformViewFactory
import io.flutter.plugins.webviewflutter.WebViewFlutterPlugin

class MainActivity: FlutterActivity() {
  override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    flutterEngine.plugins.get(WebViewFlutterPlugin::class.java)?.let { plugin ->
      if (plugin is WebViewFlutterPlugin) {
        plugin.platformViewRegistry.registerViewFactory(
          "plugins.flutter.io/webview",
          CustomWebViewFactory(flutterEngine.dartExecutor.binaryMessenger)
        )
      }
    }
  }
}

class CustomWebViewFactory(private val messenger: BinaryMessenger) : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
  override fun create(context: Context?, id: Int, args: Any?): PlatformView {
    val webView = WebView(context!!)
    // 核心配置
    webView.settings.useWideViewPort = true
    webView.settings.loadWithOverviewMode = true
    return WebViewFlutterPlugin.WebViewBuilder.build(messenger, id, args, webView)
  }
}

针对iOS平台 #

iOS端WKWebView默认已开启wide viewport支持，无需额外配置。如果仍存在适配问题，可注入JS强制设置viewport：

webViewController.runJavaScript(
  """
  let 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, maximum-scale=1.0, user-scalable=no';
  """
);

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