Flutter Web无法禁用页面缩放，求全平台兼容的实现方案

1. 配置Flutter官方viewport参数（解决meta被替换问题） #

直接在index.html中添加viewport标签会被Flutter自动覆盖，需在Flutter引擎初始化时传入自定义viewport配置，找到web/index.html中的Flutter初始化脚本，修改为如下内容：

window.addEventListener('load', function(ev) {
  _flutter.loader.loadEntrypoint({
    serviceWorker: {
      serviceWorkerVersion: serviceWorkerVersion,
    },
    onEntrypointLoaded: async function(engineInitializer) {
      // 传入自定义viewport配置，Flutter将直接使用该配置生成meta标签，不会触发替换警告
      const engine = await engineInitializer.initializeEngine({
        viewportMeta: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
      });
      await engine.runApp();
    }
  });
});

该配置可直接拦截安卓、iOS端默认的双指缩放、双击缩放行为。 #

2. 添加全场景拦截脚本（覆盖桌面端所有缩放路径） #

在web/index.html的<body>标签末尾添加如下JS脚本，拦截所有桌面端缩放操作：

<script>
// 拦截Ctrl+鼠标滚轮缩放
document.addEventListener('wheel', function(e) {
  e.ctrlKey && e.preventDefault();
}, { passive: false });

// 拦截Ctrl/Cmd + 加号/减号/等号快捷键缩放
document.addEventListener('keydown', function(e) {
  if ((e.ctrlKey || e.metaKey) && ['+', '-', '='].includes(e.key)) {
    e.preventDefault();
  }
});

// 拦截触摸板捏合缩放
document.addEventListener('gesturestart', function(e) {
  e.preventDefault();
});

// 兼容低版本移动端双击放大拦截
let lastTouchEnd = 0;
document.addEventListener('touchend', function(e) {
  Date.now() - lastTouchEnd <= 300 && e.preventDefault();
  lastTouchEnd = Date.now();
}, false);
</script>

3. iOS端特殊适配 #

iOS Safari存在强制忽略viewport配置的情况，需在<head>标签中添加如下CSS规则补充适配：

<style>
  body {
    /* 禁止所有缩放相关的触摸手势 */
    touch-action: pan-x pan-y;
    /* 禁用长按选中避免触发意外缩放 */
    user-select: none;
    -webkit-user-select: none;
  }
</style>

生效验证 #

• 移动端：安卓、iOS双指捏合无缩放效果，双击页面无放大
• 桌面端：Ctrl+鼠标滚轮、Ctrl/Cmd++/Ctrl/Cmd+-、触摸板捏合均无法缩放页面

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