Disable default pinch to zoom using mozilla firefox on Microsoft Tablet/ Touch screen monitor

Question

Well, my requirement is to zoom and pan the svg in all devices/all browsers. I have implemented it with using panzoom.js.

Now, i am facing an issue with Mozilla firefox in tablet and windows touch screen monitor. When i try to pinch and zoom the svg. It doesn't catch my event rather it catches the browser event and uses browsers zoom and zooms the whole page.

I have tried the steps below: I added this meta tag in the head of the html.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

I have also tried the following property which works in IE 11 and IE edge.

touch-action:none;

Nothing is working in Mozilla.

I need to disable the browsers zoom on pinch so that i can implement my functionality.

Thanks in advance!

Mg

Have you tried as this answer suggests? I don't have a touch screen to test it with, but it disables my macbook's pinch for zooming... – Nosedive

Or maybe trying with another pinch zoom plugin ? You could try it first in all browsers first and then continue using that one. – Cordierite

@JarodMoser i am able to disable zoom in every browser but not in firefox. Also suggested method does not work for touch pinch zoom. We need to implement 'touch-action:none' in css to disable the zoom in other browsers. – Mg

@Cordierite I have tried it in all browsers but i think firefox does not support this. – Mg

have you tried handling it? developer.mozilla.org/en-US/docs/Web/API/Pointer_events/… like that – Corbicula

@Corbicula yes i have tried this. This works for IE 11 and edge. but as i have mentioned that touch-action doesn't work with mozilla. it is not supported touch-action – Mg

Answer 1

try this :

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,user-scalable=no,minimal-ui,minimum-scale=1.0,maximum-scale=1.0">

Jeanette

Could you explain why the added parameters help in disabling pinch to zoom or what they do exactly? – Exculpate

initial-scale : The initial zoom when visiting the page. 1.0 does not zoom. minimum-scale : The minimum amount the visitor can zoom on the page. 1.0 does not zoom. maximum-scale : The maximum amount the visitor can zoom on the page. 1.0 does not zoom. user-scalable : Allows the device to zoom in and out. Values are yes or no. i have experienced that in some cases 1 and 1.0 are different – Jeanette

No luck...This does not work for firefox. I have tried it again. – Mg

Answer 2

You have to disable it through computers setting,

settings / control panel -> mouse -> device setting -> pinch to zoom -> uncheck checkbox

, This is the only possible way you can't do anything with html or javascript

Encumbrance

Thanks but i need to implement this with javascript. I cannot ask my clients to do this in there browsers. This will also be implemented on there other websites. – Mg

there is no possible way to implement this through javascript there are several other sites which also faces this issue, hope microsoft will fix it soon – Encumbrance

So, don't we have any option to implement our pinch zoom on the page ? – Mg