禁用 iOS 10+ Safari 上的视口缩放？

我尝试了之前有关捏合缩放的答案

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);

然而有时候当 event.touches.length > 1 时屏幕仍会缩放。

我发现最好的方法是使用 touchmove 事件，避免手指在屏幕上移动。代码将类似于以下内容：

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();      
}, false);

希望这能有所帮助。

在触摸事件中检查比例因子，然后防止触摸事件。

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

如所请求，我已经将我的评论转换成答案，以便大家可以投票：
这个方法在iOS 13上有效率高达90%： 和

在iOS 10.2的Safari中，虽然听起来很奇怪，但是如果你的元素或其任何祖先具有以下特点之一，则双击缩放功能将被神奇地禁用：

1. 一个onClick监听器——它可以是一个简单的noop。
2. CSS中设置了cursor: pointer

当意外发生 缩放 时，通常是以下情况造成的：

• 用户双击界面上的某个组件
• 用户使用两个或更多手指与视口进行交互（捏合）

为了防止 双击 行为，我发现两种非常简单的解决方法：

<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>

这两个方法都可以防止Safari（iOS 10.3.2）对按钮进行缩放。如您所见，一个只是JavaScript，另一个只是CSS。请适当使用。
这里有个演示: https://codepen.io/lukejacksonn/pen/QMELXQ 我尚未尝试防止捏合行为(至少还没有)，主要是因为我不倾向于为Web创建多点触摸界面，其次是因为我认为也许所有接口，包括原生应用程序UI，都应该在某些地方支持“捏合缩放”。但无论如何，我仍将设计以避免用户必须执行此操作才能使您的UI对他们可访问，不惜一切代价。

我发现了一个简单的解决办法，可以防止双击缩放：

    // Convert touchend events to click events to work around an IOS 10 feature which prevents
    // developers from using disabling double click touch zoom (which we don't want).
    document.addEventListener('touchend', function (event) {
        event.preventDefault();
        $(event.target).trigger('click');
    }, false);

在当前版本的Safari中，这个方法不再起作用。你需要将第二个参数定义为非被动性，通过传递{passiv:false}来实现。

 document.addEventListener('touchmove', function(e) {
 e.preventDefault();
}, { passive: false });

我在我的iOS页面上（iPhone 6，iOS 10.0.2）实践了所有以上答案，但没有成功。这是我的解决方案：

$(window).bind('gesturestart touchmove', function(event) {
    event = event.originalEvent || event;
    if (event.scale !== 1) {
         event.preventDefault();
         document.body.style.transform = 'scale(1)'
    }
});

这个对我有用：

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);