如何禁用双击缩放功能在Chrome 30在Android(Nexus 10)

ktecyv1j  于 2023-08-01  发布在  Go
关注(0)|答案(3)|浏览(213)

是否可以禁用双击Chrome上的元素所触发的上下文缩放?(设置:Nexus 10|安卓4.3| Chrome 30)。
双击不是原生触摸事件(touchstart,touchend等)之一。似乎唯一的解决方案是自己定义双击事件的库(jquery-doubletap和hammer.js),但我在使用这些库时遇到了问题(https://github.com/EightMedia/hammer.js/issues/388)。
谁能解释一下双击事件是如何触发的?它似乎不是一个元素事件,而是一个由浏览器本身处理的事件(每个浏览器都规定了自己独特的行为)。
最后,有没有办法禁用双击缩放?这对我来说是一个UX杀手。谢谢

btqmn9zl

btqmn9zl1#

在Chrome for Android的未来版本中,当您设置了视口时,双击将被删除。如果你想在stable中禁用它,你需要在你的viewport中设置user-scalable=no。
这将禁用缩放(这可能对可访问性不利),但应该允许您获取所有触摸事件。

mtb9vblg

mtb9vblg2#

这段代码基本上只是防止双击功能发生。该事件仍然会为每个touchstart事件触发,因此只需将任何其他功能放在if语句之外,您就可以摆脱烦人的双击缩放功能。

var time_stamp = 0; // Or Date.now()
window.addEventListener("touchstart", function(event_) {
    if (event_.timeStamp - time_stamp < 300) { // A tap that occurs less than 300 ms from the last tap will trigger a double tap. This delay may be different between browsers.
        event_.preventDefault();
        return false;
    }
    time_stamp = event_.timeStamp;
});

字符串

yuvru6vn

yuvru6vn3#

我想防止双击缩放,但允许捏缩放。我通过查看event.touches.length解决了这个问题,并且只在长度为1并且时间过短时才阻止事件。

function preventDoubleTap(elem) {
  let lastTimeStamp = 0;
  elem.addEventListener('touchstart', (event) => {
    if (event.touches.length === 1) {
      if (event.timeStamp - lastTimeStamp < 300) event.preventDefault();
      lastTimeStamp = event.timeStamp;
    }
  });
}

字符串

相关问题