Flutter Web 行高不一致

Question

这里有两张手机chrome浏览器和pc chrome浏览器的截图，都是同一个网站。电脑上的chrome浏览器看起来还不错，但是手机的chrome浏览器上的文字行都乱了。

注意：我在大多数 Text 小部件中使用 TextStyle.height。

这个问题有解决办法吗？

Answer 1

我自己想出了解决办法。

运行flutter build web时选择canvaskit作为web渲染器。

flutter build web --web-renderer canvaskit

参考here，

auto（默认）- 自动选择要使用的渲染器。此选项在应用程序在移动浏览器中运行时选择 HTML 渲染器，在应用程序在桌面浏览器中运行时选择 CanvasKit 渲染器。

html - 始终使用 HTML 渲染器。

canvaskit - 始终使用 CanvasKit 渲染器。

由于移动浏览器中出现了不需要的重叠行为，我强制构建到 canvaskit。