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!

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">