Safari iPad : prevent zoom on double-tap
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?
Here's a jQuery plugin I wrote for the same purpose - selectively disabling double-tap zoom on given page elements (in my case, navigation buttons to flip pages) I want to respond to every tap (including double-tap) as a normal click event, with no iOS "touch magic".
To use it, just run something like $('.prev,.next').nodoubletapzoom();
on the elements you care for. (Edit: now also ignores pinches)
// jQuery no-double-tap-zoom plugin
// Triple-licensed: Public Domain, MIT and WTFPL license - share and enjoy!
(function($) {
var IS_IOS = /iphone|ipad/i.test(navigator.userAgent);
$.fn.nodoubletapzoom = function() {
if (IS_IOS)
$(this).bind('touchstart', function preventZoom(e) {
var t2 = e.timeStamp
, t1 = $(this).data('lastTouch') || t2
, dt = t2 - t1
, fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(this).trigger('click').trigger('click');
});
};
})(jQuery);
Mobile Safari does not support the javascript ondblclick event. It's interpreted by Safari as a "zoom".
Raul Sanchez has posted a potential solution: http://appcropolis.com/implementing-doubletap-on-iphones-and-ipads/
try this modified code. It should work for both android and IOS devices
(function($) {
$.fn.nodoubletapzoom = function() {
$(this).bind('touchstart', function preventZoom(e){
var t2 = e.timeStamp;
var t1 = $(this).data('lastTouch') || t2;
var dt = t2 - t1;
var fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1){
return; // not double-tap
}
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(e.target).trigger('click');
});
};
})(jQuery);
Then apply the nodoubletapzoom() to the body tag
$("body").nodoubletapzoom();