Flutter WebView实现类桌面端HTML页面缩放效果方案咨询

要在Flutter中实现类似桌面Chrome的缩放（缩放时页面响应式重布局，而非移动端内容放大溢出），可以从以下方案入手：

方案一：优化flutter_inappwebview配置 #

无需更换库，通过调整WebView的核心配置即可实现需求：

1. 启用宽视口适配与概览模式
   这两个属性是让WebView模拟桌面浏览器视口行为的关键，配合缩放设置后，页面会随缩放比例重新布局：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://google.com")),
  settings: InAppWebViewSettings(
    // 允许WebView适配页面的宽视口
    useWideViewPort: true,
    // 以概览模式加载页面，适配控件宽度
    loadWithOverviewMode: true,
    // 开启用户缩放
    supportZoom: true,
    // 初始缩放比例（百分比，100对应1.0倍）
    initialScale: 100,
  ),
)

2. 动态修正页面viewport标签
   如果页面本身的viewport配置有冲突，可在页面加载完成后通过JS强制修改：

onLoadStop: (controller, url) async {
  await controller.evaluateJavascript(source: """
    const metaViewport = document.querySelector('meta[name="viewport"]');
    if (metaViewport) {
      metaViewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes');
    }
  """);
}

方案二：切换到webview_flutter库 #

如果flutter_inappwebview的配置仍未达到预期，可尝试webview_flutter，通过模拟桌面UA让页面以桌面模式加载：

WebView(
  initialUrl: "https://google.com",
  javascriptMode: JavascriptMode.unrestricted,
  // 设置桌面Chrome的UA，让页面加载桌面版响应式布局
  userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36",
  // 开启缩放功能
  zoomEnabled: true,
)

设置桌面UA后，页面会采用桌面端的响应式逻辑，缩放时自动重布局，不会出现视口溢出的问题。

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