javascript - Safari iPad 1 : how to disable zoom/centering on double-tap, 但保持双指缩放

Question

我想知道是否可以防止在 Safari iOS (iPad 1) 中的特定 HTML 元素上双击缩放和双击居中？

因为我的小型 HTML5 游戏会强制用户进行快速点击(或点击)，这会被解释为双击，并且当它发生时 - 页面会更改缩放并自行居中。

检测双击(就像在这个答案中 - Safari iPad : prevent zoom on double-tap )闻起来很糟糕..

错误答案#1: <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 不适合我的目的，因为它会阻止任何缩放。

错误答案#2:也许会 .preventDefault()仅点击事件就足够了吗？ - 没有任何影响。

Answer 1

除了捕获您想要阻止的事件并调用 preventDefault() 之外别无他法。关于它们，正如您已经或多或少了解到的那样。

确实，某些特定的 CSS 属性/值可能会改变全局站点行为(例如，固定宽度或 fixed)，但您无法避免对操作系统的更改(请参阅 固定处理 iOS5 中的更改)，这些更改也不一定会阻止所有行为(捏合可能会关闭，但不会双击)。

因此，仅针对双击 禁用默认行为的最佳方法是利用 count of touches iOS 提供:如果我们只有一个联系人，那么我们正在点击。第二，这意味着我们正在紧缩。

以下设置代码提供了该功能:

var elm = document.body; // or some selection of the element you want to disable

var catcher = function(evt) {
    if (evt.touches.length < 2)
        evt.preventDefault();
};

elm.addEventListener('touchstart', catcher, true);

Demo在 jsFiddle 上。

注意:addEventListener 的第三个参数 (true) 表示我们想要 capture events ，那就是把他们都抓起来，即使是为了我们的子孙后代。