Is there a way to disable chrome pinch zoom with javascript. I don't want to change anything in chrome://flags I want to disable chrome's default zooming and sliding to previous page behaviors and instead I want to write my own panning/zooming code. I'm able to handle all that events but calling 'preventDefault' doesn't help. Handling of mousewheel, ctrl+ and ctrl- events and calling 'preventDefault' there also does not help.
Finally I want to have custom multitouch zooming with 2 fingers and panning capabilities for chrome and IE 11. IE panning works perfectly for me, but zooming doesn't.
Sample script below:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<script type="text/javascript" src="Scripts/jquery-3.1.0.js" ></script>
<script type="text/javascript" >
document.addEventListener('touchstart', function(event){
event.preventDefault();
});
document.addEventListener('touchend', function(event){
event.preventDefault();
});
document.addEventListener('touchmove', function(event){
event.preventDefault();
});
$('*').bind('touchmove', false);
</script>
<body>
<h1 align="center">
TEST STRING FOR PINCH ZOOM
</h1>
</body>
</html>
Is there a way to disable chrome pinch zoom with javascript. I don't want to change anything in chrome://flags I want to disable chrome's default zooming and sliding to previous page behaviors and instead I want to write my own panning/zooming code. I'm able to handle all that events but calling 'preventDefault' doesn't help. Handling of mousewheel, ctrl+ and ctrl- events and calling 'preventDefault' there also does not help.
Finally I want to have custom multitouch zooming with 2 fingers and panning capabilities for chrome and IE 11. IE panning works perfectly for me, but zooming doesn't.
Sample script below:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<script type="text/javascript" src="Scripts/jquery-3.1.0.js" ></script>
<script type="text/javascript" >
document.addEventListener('touchstart', function(event){
event.preventDefault();
});
document.addEventListener('touchend', function(event){
event.preventDefault();
});
document.addEventListener('touchmove', function(event){
event.preventDefault();
});
$('*').bind('touchmove', false);
</script>
<body>
<h1 align="center">
TEST STRING FOR PINCH ZOOM
</h1>
</body>
</html>
- Possible duplicate of How can I "disable" zoom on a mobile web page? – LellisMoon Commented Feb 15, 2017 at 9:33
- no, it's not related to mobile. I'm having that issue in chrome browser on Windows 10 desktop (all in on PC). Though I specified all meta keywords mentioned with your link and it doesn't help – kmkrtich Commented Feb 16, 2017 at 10:04
- So you need to disable the browser zoom example ctrl +/-? – LellisMoon Commented Feb 16, 2017 at 11:03
- No, By default on GoogleChrome browser if you open any website zooming works on whole content of webpage. I mean if you zoom on touch screen laptop with 2 fingers. It does zoom like an image. I want to handle that part. Prevent default behaviour and add my custom zooming logic which will work only on specific part of my webpage. – kmkrtich Commented Feb 16, 2017 at 15:46
1 Answer
Reset to default 8This works for me in case anyone shows up here looking for an answer.
document.addEventListener(
'wheel',
function touchHandler(e) {
if (e.ctrlKey) {
e.preventDefault();
}
},
{ passive: false }
);