如何将Flutter Web应用的默认缩放比例设置为150%？

Flutter Web会自动覆盖手动设置的viewport标签，所以常规修改index.html的方法不生效。以下是两种可行的实现方式：

方法一：通过Dart代码直接操作DOM #

利用dart:html包在应用启动后修改页面缩放，无需额外修改HTML文件：

import 'dart:html' as html;
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
  
  // 应用启动后设置150%缩放
  html.document.body?.style.transform = 'scale(1.5)';
  // 设置缩放原点为左上角，避免布局偏移
  html.document.body?.style.transformOrigin = 'top left';
  // 可选：调整body宽度，防止出现横向滚动条
  html.document.body?.style.width = '66.67%'; // 100% ÷ 1.5 ≈ 66.67%
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Zoom Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('150% Zoom')),
        body: const Center(child: Text('Scaled Content')),
      ),
    );
  }
}

方法二：通过HTML模板注入JS监听事件 #

修改web/index.html，添加监听Flutter初始化完成的事件，在页面渲染后再设置缩放：

1. 打开web/index.html，在body标签末尾添加以下脚本：

<script>
  // 监听Flutter第一帧渲染完成事件
  window.addEventListener('flutter-first-frame', () => {
    document.body.style.transform = 'scale(1.5)';
    document.body.style.transformOrigin = 'top left';
    document.body.style.width = '66.67%';
  });
</script>

2. 保存后重新编译运行Flutter Web应用即可生效。

注意事项 #

• 使用scale(1.5)会缩放整个页面内容，包括字体、图片和布局元素。
• 设置transformOrigin: top left是为了避免缩放后页面内容偏移到视口外。
• 调整body宽度是为了抵消缩放带来的横向滚动条问题，若不需要可以省略。

内容的提问来源于stack exchange，提问作者Rishik B.