如何在Flutter中通过webview_flutter设置渲染网页的字体大小？

为什么之前的方法无效 #

1. Flutter Theme设置不影响WebView内容：你设置的TextTheme仅控制Flutter原生组件的字体样式，WebView渲染的是独立的HTML网页，其样式由自身CSS控制，和Flutter的Theme完全无关，因此这个方法不会生效。
2. JS注入时机错误+选择器错误：直接在loadRequest后调用runJavaScript时，网页还未加载完成，DOM元素尚未完全生成，注入的样式无法作用到页面；同时你使用的CSS选择器.*是错误的，正确的全局选择器应为*。

正确的解决方案 #

方法一：监听页面加载完成后注入样式 #

修改web_view_container.dart，通过setNavigationDelegate监听页面加载完成事件，再注入样式：

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

class WebViewContainer extends StatefulWidget {
  const WebViewContainer({super.key});

  @override
  State<WebViewContainer> createState() => _WebViewContainerState();
}

class _WebViewContainerState extends State<WebViewContainer> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(NavigationDelegate(
        onPageFinished: (String url) {
          // 页面加载完成后注入全局字体样式
          controller.runJavaScript('''
            var style = document.createElement('style');
            style.innerHTML = '* {font-size: 20px !important;}'; // 替换为你需要的字体大小
            document.head.appendChild(style);
          ''');
        },
      ))
      ..loadRequest(Uri.parse('https://bkthai.org/murli/'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Today's Murli"),
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

方法二：精准针对文本元素设置样式 #

如果全局修改字体导致页面布局混乱，可以只针对文本相关标签调整：

// 在onPageFinished中替换为这段JS代码
controller.runJavaScript('''
  var style = document.createElement('style');
  style.innerHTML = 'body, p, div, span, h1, h2, h3, h4, h5, h6 {font-size: 22px !important; line-height: 1.5;}';
  document.head.appendChild(style);
''');

方法三：利用WebView缩放功能放大页面 #

如果只需整体放大页面，可直接设置缩放比例：

// 在onPageFinished中添加
controller.runJavaScript('document.body.style.zoom = "1.5"'); // 1.5倍缩放

关键注意点 #

• 必须将JavaScriptMode设置为unrestricted，否则无法执行注入的JS代码。
• 使用!important强制覆盖网页原有的CSS规则，避免被优先级更高的样式覆盖。

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