Flutter WebView网页适配手机后字体放大实现方法求助

针对你遇到的网页自动缩小字体的问题，有几种可行的解决方法：

方法1：注入JavaScript强制调整字体/缩放 #

利用WebView的onPageFinished回调，在网页加载完成后注入JS代码修改页面的字体大小或缩放比例，示例代码如下：

// 先定义全局变量持有WebView控制器
WebViewController? webViewController;

body: Container(
  child: WebView(
    initialUrl: url,
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController controller) {
      webViewController = controller;
    },
    onPageFinished: (String finishUrl) {
      // 方案A：直接修改body字体大小（单位可设为px或em）
      webViewController?.evaluateJavascript('document.body.style.fontSize = "16px";');
      // 方案B：整体缩放页面（1.2表示放大1.2倍，按需调整）
      // webViewController?.evaluateJavascript('document.body.style.zoom = "1.2";');
      // 方案C：如果网页用rem布局，修改根元素字体大小
      // webViewController?.evaluateJavascript('document.documentElement.style.fontSize = "18px";');
    },
  ),
),

方法2：配置WebView缩放属性 #

通过设置WebView的缩放参数，允许用户手动放大或强制初始缩放比例：

body: Container(
  child: WebView(
    initialUrl: url,
    javascriptMode: JavascriptMode.unrestricted,
    // 设置初始缩放比例（1.0为原始大小，1.5表示放大50%）
    initialScale: 1.5,
    // 允许用户通过手势缩放页面
    gestureNavigationEnabled: true,
    // 启用内置缩放控件（部分平台支持）
    zoomEnabled: true,
  ),
),

方法3：修改User-Agent（可选） #

部分网页会根据User-Agent判断设备类型并调整字体，如果网页是识别为移动设备才缩小字体，可以修改WebView的User-Agent为桌面端标识：

body: Container(
  child: WebView(
    initialUrl: url,
    javascriptMode: JavascriptMode.unrestricted,
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36',
  ),
),

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