flutter下的webview适配rem问题

项目背景

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

技术问题

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

问题排查过程

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

最终解决方案

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

Dart 复制代码
return MediaQuery(
    data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
    child: child!,
);

if (_controller.platform is AndroidWebViewController) {
    (_controller.platform as AndroidWebViewController).setTextZoom(100);
}
相关推荐
猪哥帅过吴彦祖21 小时前
Flutter 系列教程:核心概念 - StatelessWidget vs. StatefulWidget
前端·javascript·flutter
GeniuswongAir1 天前
Flutter实现滑动页面停留吸附
前端·javascript·flutter
lar_slw2 天前
flutter json转实体类
android·flutter·json
恋猫de小郭2 天前
基于 Dart 的 Terminal UI ,pixel_prompt 这个 TUI 库了解下
android·前端·flutter
猪哥帅过吴彦祖2 天前
Flutter 系列教程:Dart 语言快速入门 (下)
前端·flutter·ios
zhifanxu2 天前
Flutter 中使用 Color 的最优方案
flutter
江上清风山间明月2 天前
flutter 编译报错java.util.zip.ZipException: zip END header not found
java·开发语言·flutter
科技林总2 天前
【TS5】Electron与Flutter
javascript·flutter·electron
这次选左边2 天前
Flutter混合Android开发Release 打包失败GeneratedPluginRegistrant.java,Plugin不存在
android·java·flutter
小蜜蜂嗡嗡3 天前
flutter在包含ListVIew的滚动列表页面中监听手势:NotificationListener
flutter