Flutter Element Embedding嵌入移动端浏览器缩放异常问题排查

问题原因 #

1. 移动端浏览器默认viewport行为：iOS Safari等移动端浏览器默认会将页面渲染为980px的逻辑宽度，再缩放适配屏幕，导致Flutter获取到的是缩放前的宽度值，而非容器实际宽度。
2. Flutter缩放策略不匹配：Element Embedding模式下，默认的缩放策略会尝试适配全局viewport，而非绑定容器尺寸，加上设备像素比（devicePixelRatio）计算偏差，最终出现0.5倍缩放的现象。

解决步骤 #

1. 修复HTML Viewport元标签 #

在web/index.html的<head>中添加或修改viewport标签，强制浏览器使用设备实际宽度，禁止默认缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

2. 配置Flutter初始化的缩放策略 #

修改Flutter嵌入的初始化代码，强制Flutter严格遵循容器尺寸，并监听容器变化手动更新：

const flutterTarget = document.getElementById('flutter_target');

async function initFlutter() {
  const flutterElement = await flutter.loader.loadEntrypoint({
    entrypointUrl: 'main.dart.js',
    onEntrypointLoaded: async (engineInitializer) => {
      const engine = await engineInitializer.initializeEngine({
        hostElement: flutterTarget,
        // 关键：设置为size模式，让Flutter使用容器精确尺寸
        resizeStrategy: flutter.ResizeStrategy.size,
      });
      await engine.runApp();

      // 监听容器尺寸变化，实时通知Flutter更新
      const resizeObserver = new ResizeObserver(() => {
        engine.setSize({
          width: flutterTarget.clientWidth,
          height: flutterTarget.clientHeight,
        });
      });
      resizeObserver.observe(flutterTarget);
    },
  });
}

initFlutter();

3. 调整CSS确保容器尺寸正确 #

修改css/style.css，确保容器占满视口且无额外边距，避免触发页面缩放：

#flutter_target {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* 禁用触摸缩放 */
  touch-action: manipulation;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

4. Flutter代码中确保尺寸获取正确 #

保持原有MediaQuery逻辑即可，它会自动读取容器的实际尺寸：

@override
Widget build(BuildContext context) {
  final screenSize = MediaQuery.sizeOf(context);
  return Scaffold(
    body: Center(
      child: Text('容器宽度: ${screenSize.width.toStringAsFixed(0)}px'),
    ),
  );
}

验证效果 #

完成上述修改后，在iOS模拟器的Safari或移动端Chrome中测试：

• MediaQuery.sizeOf(context).width会显示与设备逻辑宽度一致的值（如iPhone 14为390px）
• 嵌入的Flutter Widget不再出现0.5倍缩放，与页面其他元素缩放比例一致

内容的提问来源于stack exchange，提问作者tschulayen