flutter下的webview适配rem问题

余很多之很多2025-07-16 23:21

项目背景 ：

近期承接了一个移动应用开发项目，客户已使用Vue.js独立开发了前端页面，现需要将其封装为原生应用。经过技术评估，我们决定采用Flutter框架作为应用容器，通过WebView加载客户开发的Vue页面。

技术问题 ：

在测试阶段发现，部分测试设备上页面布局出现异常。经排查发现，客户的Vue页面采用了rem单位进行响应式布局，其实现方式是在页面初始化时动态计算并设置根元素的font-size，后续所有尺寸均基于rem单位。

问题排查过程：

首先尝试通过Gemini CLI工具分析问题，但提供的多个解决方案均未奏效。
转为手动调试，通过日志发现font-size计算值异常，导致布局乱。
采用临时方案：注释动态计算逻辑，硬编码font-size值，测试确认布局恢复正常。
进一步分析发现，问题根源在于测试设备将系统字体大小设置为"中"等尺寸。
验证方案：将系统字体恢复默认后，代码回退到原始版本，布局显示正常。

最终解决方案 ：

考虑到不应限制用户调整系统字体大小的需求，我们决定在应用层强制使用默认字体设置：

Dart 复制代码

return MediaQuery(
    data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
    child: child!,
);

if (_controller.platform is AndroidWebViewController) {
    (_controller.platform as AndroidWebViewController).setTextZoom(100);
}