flutter下的webview适配rem问题
项目背景:
近期承接了一个移动应用开发项目,客户已使用Vue.js独立开发了前端页面,现需要将其封装为原生应用。经过技术评估,我们决定采用Flutter框架作为应用容器,通过WebView加载客户开发的Vue页面。
技术问题:
在测试阶段发现,部分测试设备上页面布局出现异常。经排查发现,客户的Vue页面采用了rem单位进行响应式布局,其实现方式是在页面初始化时动态计算并设置根元素的font-size,后续所有尺寸均基于rem单位。
问题排查过程:
- 首先尝试通过Gemini CLI工具分析问题,但提供的多个解决方案均未奏效。
- 转为手动调试,通过日志发现font-size计算值异常,导致布局乱。
- 采用临时方案:注释动态计算逻辑,硬编码font-size值,测试确认布局恢复正常。
- 进一步分析发现,问题根源在于测试设备将系统字体大小设置为"中"等尺寸。
- 验证方案:将系统字体恢复默认后,代码回退到原始版本,布局显示正常。
最终解决方案:
考虑到不应限制用户调整系统字体大小的需求,我们决定在应用层强制使用默认字体设置:
return MediaQuery(data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),child: child!,
);if (_controller.platform is AndroidWebViewController) {(_controller.platform as AndroidWebViewController).setTextZoom(100);
}