使用元标签的解决方案对我来说并不管用(在Chrome win10和safari IOS 14.3上进行了测试)，我也相信关于可访问性的担忧，正如Jack和其他人所提到的，应该得到尊重。

我的解决方案是只对被默认缩放破坏的元素禁用缩放。

为此，我为缩放手势注册了事件监听器，并使用event. preventdefault()来抑制浏览器的默认缩放行为。

这需要通过几个事件(触摸手势、鼠标滚轮和按键)来完成。下面是触摸板上的鼠标滚轮和捏手势的示例:

noteSheetCanvas.addEventListener("wheel", e => {
        // suppress browsers default zoom-behavior:
        e.preventDefault();

        // execution of my own custom zooming-behavior:
        if (e.deltaY > 0) {
            this._zoom(1);
        } else {
            this._zoom(-1);
        }
    });

如何检测触摸手势描述在这里:https://stackoverflow.com/a/11183333/1134856

我使用它来保持应用程序大部分部分的标准缩放行为，并在canvas元素上定义自定义缩放行为。

Web应用可能的解决方案:虽然缩放在iOS Safari中不能再被禁用， 当从主屏幕快捷方式打开网站时，它将被禁用。

添加这些元标签来声明你的应用是“Web App capable”:

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" >
    <meta name="apple-mobile-web-app-capable" content="yes" >

但是，只有当你的应用程序是自我维持的时候才使用这个功能，因为前进/后退按钮和URL栏以及共享选项都是禁用的。(你仍然可以左右滑动)然而，这种方法可以实现相当的应用程序的用户体验。全屏浏览器只有在网站从主屏幕加载时才会启动。我在根文件夹中加入了apple-touch-icon-180x180.png文件后，它才开始工作。

作为奖励，你可能还想包括这个的一个变体:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

你可以通过简单地将以下“元”元素添加到你的“头脑”中来完成任务:

<meta name="viewport" content="user-scalable=no">

添加所有属性，如'width'，'initial-scale'， 'maximum-width'， 'maximum-scale'可能不起作用。因此，只需添加上面的元素。

对于那些晚到派对的人来说，kgutteridge的答案对我来说不适用，Benny Neugebauer的答案包括目标密度(一个被弃用的功能)。

然而，这对我来说是有效的:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

请添加脚本以禁用捏，点击，聚焦缩放

似乎仅仅在index.html中添加元标签并不能阻止页面缩放。添加下面的样式会有神奇的效果。

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

编辑: 演示:https://no-mobile-zoom.stackblitz.io