为了符合WAI WCAG 2.0 AA可访问性要求，您必须永远不要禁用缩放。(WCAG 2.0: SC 1.4.4 Resize text Level AA)。你可以在这里阅读更多关于它的内容:移动辅助功能:WCAG 2.0和其他W3C/WAI指南如何应用于移动，2.2缩放/放大

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

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

在Safari 9.0及以上版本中，您可以在视口元标签中使用如下所示的“缩小到适合”

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

使用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。

我愚蠢地设置了一个包装器div，其宽度以像素为单位。其他浏览器似乎足够聪明，可以处理这个问题。一旦我将宽度转换为百分比值，它在Safari手机上也能正常工作。很烦人。

.page{width: 960px;}

to

.page{width:93.75%}

<div id="divPage" class="page">
</div>