flutter下的webview适配rem问题

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

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

问题排查过程

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

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

余很多之很多

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值