如何让Flutter应用WebView不受辅助功能字体大小设置影响

你用MediaQuery设置textScaleFactor: 1.0没生效，是因为这个配置只对Flutter原生组件起作用，WebView是调用原生系统的Web控件（Android的WebView、iOS的WKWebView），它的内部网页渲染不受Flutter的文字缩放设置控制。下面给你几种可行的解决方法：

方法1：通过WebView控件的原生设置控制 #

Android端 #

使用webview_flutter包的AndroidSettings直接设置文字缩放比例为100%：

WebView(
  initialUrl: "你的网页地址",
  androidSettings: const AndroidSettings(
    textZoom: 100, // 强制文字缩放为100%，忽略系统辅助功能的字体设置
  ),
)

iOS端 #

可以通过JavaScript禁用网页的文字自适应缩放，或者配置IosSettings：

WebView(
  initialUrl: "你的网页地址",
  onWebViewCreated: (controller) {
    // 注入JS禁用文字缩放
    controller.runJavascript('document.documentElement.style.webkitTextSizeAdjust = "none"');
  },
  iosSettings: const IosSettings(
    preferredContentMode: IosPreferredContentMode.recommended,
  ),
)

方法2：在网页的CSS中固定文字缩放 #

如果网页是你自己开发的，直接在CSS里添加以下样式，从根源上禁止网页跟随系统字体缩放：

html, body {
  -webkit-text-size-adjust: 100%; /* 兼容iOS/WebKit */
  text-size-adjust: 100%; /* 标准属性 */
}

方法3：结合Flutter层和WebView设置 #

如果WebView的父容器因为系统缩放出现布局问题，可以保留你原来的MediaQuery配置，同时搭配上面的WebView专属设置，确保Flutter组件和WebView都不受系统字体缩放影响。

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