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, so I can't use "event.preventDefault();"
• I need to do this only when some conditions are fulfilled, so I can't use the tag "<meta name = "viewport" content = "user-scalable = no">"... If I did that, users could never zoom on my page.

How can I fix these problems?

Answer 1

All solutions that I have seen (on this page and also elsewhere) have a side effect that they prevent in fast rate repeated clicks. Allows one click per 500ms or similar. This can be okay in some cases, but not eg. if you have a shooter or arrow buttons to allow fast moving from item to item.

The easiest solution is this:

$('#nozoom').on('touchstart', function(e)
{
  fn_start(e);
  e.preventDefault();
});

This calls fn_start() (the actual callback function) every time when touch is started, but prevents then default zoomings etc.

The working comparative example is here: http://jsbin.com/meluyevisi/1/. Green box prevents, red box allows.