使用CSS的touch-action属性是最优雅的解决方案。在iOS 13.5和iOS 14上测试。

禁用缩放手势和双击缩放:

body {
  touch-action: pan-x pan-y;
}

如果你的应用程序也不需要平移，即滚动，使用这个:

body {
  touch-action: none;
}

我在iOS 12中使用以下代码:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

使用第一个if语句，我确保它只会在iOS环境中执行(如果它在Android中执行，滚动行为将被破坏)。另外，请注意被动式选项设置为false。

对于iphone safari到iOS 10“viewport”不是一个解决方案，我不喜欢这种方式，但我已经使用了这个javascript代码，它帮助了我

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

有时候内容标签中的其他指令会打乱苹果关于如何布局页面的最佳猜测/启发式，你只需要禁用缩放。

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

试着在你的头标签上添加以下内容:

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

另外

<meta name="HandheldFriendly" content="true">

最后，无论是作为一个样式属性还是在你的css文件中，为基于webkit的浏览器添加以下文本:

html {
    -webkit-text-size-adjust: none
}

这在IOS 10.3.2中运行良好

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

谢谢@arthur和@aleclarson