Is there anyway to disable the pinch zooming available on mac's touchpad on the desktop?
I tried adding:
<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
but this did nothing. Thanks!
I faced similar problem where I wanted to disable pinch-zoom gesture on windows machine, here's javascript code snippet that worked for me
window.addEventListener('wheel', (e) => {
if (e.ctrlKey) {
e.preventDefault();
}
}, {
"passive": false
});
FYI - Along with disabling the pinch-zoom functionality it also disables ctrl+mouse wheel up/down event functionality.
jsbin POC
Related
This question has been asked in a couple different flavors, but none satisfy.
The native browser (Google Chrome for Mac, for instance) supports the "pinch to zoom" gesture by default which will zoom the whole viewport. How do I disable (react to) this default behavior so I can write my own pinching/zooming logic? Google Maps https://maps.google.com/ seems to have achieved this since pinching on the map will only scale the map area, leaving the rest of the UI intact, while pinching on the left sidebar shows the default behavior.
I have tried a few approaches such as HTML "viewport" meta tag, CSS touch-action: none; and JavaScript document.addEventListener('touchmove', e => { e.preventDefault() }), but they all seem to only work on mobile.
I accidentally found a solution which works on Chrome. You basically have to preventDefault the "wheel" event. ctrlKey will be true if it is a pinch event instead of a scroll.
element.addEventListener('wheel', event => {
const { ctrlKey } = event
if (ctrlKey) {
event.preventDefault();
return
}
}, { passive: false })
I'd guess this is how Google Maps does it.
The (most) cross-browser solution is probably a combination of the techniques mentioned: user-scalable=no in the "viewport" meta tag for the browsers that do support it and this one for native Chrome.
Use this meta tag:
<meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
I have an issue with zooming. I want to block pinch to zoom in Mobile Safari on HTML elements. I use script to prevent default behavior of browser and it is working fine for normal pinching, but when I start scroll with one finger and later add second and pinch Safari still zooming the page...
Has anyone any idea how can I block this zooming?
I'am creating mobile game using canvas and use HTML for message windows so please don't write that it is a bad idea to block zooming for accessibility reasons.
Code to prevent zooming:
document.addEventListener("touchmove", function(event) {
event = event.originalEvent || event;
if(event.touches.length > 1 || event.scale > 1) {
event.preventDefault();
}
}, false);
UPDATE:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
This meta tag doesn't work because Apple disable it in Mobile Safari since iOS 10 up to accessibility reasons
can you test it?
document.documentElement.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
I’ve tried the following approach:
<meta name="viewport" content="width=device-width, minimal-ui">
and
window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);
But it hasn’t worked. Could you advise something on this?
The best solution I found is this one. Basically make your content higher than viewport and it would become fullscreen (Hiding toolbars) when switching to landscape. Not perfect but usable.
Just go to this test website : ltdcoapp.uphero.com , from you smart phone and then slide the screen to see what is on the right and the problem is : that yes the screen slides and shows what I am trying to hide on the right side .
my attempts so far was to use body{overflow-x: hidden;} which only works with desktop browsers though .
can you please tell me what to do to prevent this ?
PS: I'm really not trying to get traffic to the website , but it is the only way to show you the problem easily
Have you set a corresponding width with your overflow:hidden property?
Edit: Relative values like 100% for your width won't work (as they'll also contain the right part of the screen). Fix it to absolute pixel values (in this example: 1024px):
body {
overflow-x: hidden
width: 1024px
}
It might also help to add the corresponding viewport meta-tags in the header:
<meta name="viewport" content="user-scalable=no, width=1024px, initial-scale=1.0" />
Also, would disabling scrolling altogether be a solution? Disable scrolling in all mobile devices
This one will prevent any touch response , which is kinda useless in my situation .
document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });
This one will be very uselful , but the problem is that it prevents both horizontal and vertical scrolling.
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
This only works for desktop browsers .
body{overflow-x: hidden;}
Tried this a few times and all it do it to prevent user from scaling the page , which is useful at some point , but doesn't solve the problem of scrolling to the right .
<meta name="viewport" content="width=device-width; initial-scale = 1.0;user-scalable=no" />
Thx dominikus , you surely helped .
I'm building js application on top of BlackBerry 10 WebWorks SDK and i'm looking other whys to prevent Panning and zooming behavior.
I tried the ios method by disable the default touchmove behavior but it cause other bugs that i can afford.
<script type="text/javascript">
function preventBehavior(e) {
e.preventDefault();
}
document.addEventListener('touchmove', preventBehavior, false);
</script>
other suggestion ??
If you're referring to the viewport panning/scaling/bouncing you get when not setting up your viewport have a go at this:
I generally add this in the of my index html file.
<!-- set viewport -->
<script>
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(meta);
</script>