Safari iPad : prevent zoom on double-tap

Question

I\'m creating a site on Safari for iPad. I need to prevent the zoom on double-tapping event but I have two problems:

• a double tap doesn’t generate any events,

Answer 1

In case someone needs a solution without jQuery, I found this one (https://exceptionshub.com/disable-double-tap-zoom-option-in-browser-on-touch-devices.html) working very well. The function expects and event object as a parameter:

function preventZoom(e) {
  var t2 = e.timeStamp;
  var t1 = e.currentTarget.dataset.lastTouch || t2;
  var dt = t2 - t1;
  var fingers = e.touches ? e.touches.length : 0;
  e.currentTarget.dataset.lastTouch = t2;

  if (!dt || dt > 500 || fingers > 1) return; // not double-tap

  e.preventDefault();
  e.target.click();
}

Example for Angular 10:

Click me

Component

clicked(event) {
  this.preventZoom(event);
  // your code
}

preventZoom(e) {
  var t2 = e.timeStamp;
  var t1 = e.currentTarget.dataset.lastTouch || t2;
  var dt = t2 - t1;
  var fingers = e.touches?.length;
  e.currentTarget.dataset.lastTouch = t2;

  if (!dt || dt > 500 || fingers > 1) return; // not double-tap

  e.preventDefault();
  e.target.click();
}