Javascript - How to stop pinch zoom, multi touch input attacks?
This is how you prevent zooming in Chrome:
document.addEventListener("touchstart", function(e){
e.preventDefault();
},{passive: false});
Maybe except of some element
document.getElementById('someelement').addEventListener('touchstart', function(e){e.stopPropagation()}, false);
I don't know if this counts as a full answer but I don't have the rep to comment.
One option is to set a handler for touch events
window.addEventListener("touchstart", touchHandler, false); and then write a touchHandler function
function touchHandler(event){
if(event.touches.length > 1){
//the event is multi-touch
//you can then prevent the behavior
event.preventDefault()
}
}
Here is some more info about developing with touch events https://mobiforge.com/design-development/html5-mobile-web-touch-events You will have to set the handler for a different touch event to prevent the default pinch zoom behavior depending on the browser. A list can be found here: http://www.quirksmode.org/mobile/default.html
I don't know if this will work for you but it might be worth a try.
You should be able to prevent users from zooming in by adding this meta tag to your <head>:
<meta name="viewport" content="width=device-width, user-scalable=no">
My version of Google Chrome Version 51.0.2704.84 (64-bit), respects this setting when I test it using its touch emulation in the developer tools.
For example:
- A website that is zoomable by pinching: Hacker News
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- A website that is not zoomable by pinching: Designer News
<meta name="viewport" content="width=device-width, user-scalable=no">
I would like to comment that allowing your users to zoom in and out shouldn't be considered an “attack”. Zooming in is very important for people with bad eye sight (or the visually impaired, I'm not sure what the correct and polite English term would be).
If you disable the natural zoom behavior, you should take full responsibility for the readability of your web page.