12

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!

Rohit Arora
  • 2,246
  • 2
  • 24
  • 40
  • Have you tried as [this answer suggests?](http://stackoverflow.com/a/31131948/5187323) I don't have a touch screen to test it with, but it disables my macbook's pinch for zooming... – Jarod Moser Oct 06 '16 at 20:11
  • Or maybe trying with another pinch zoom plugin ? You could try it first in all browsers first and then continue using that one. – Leo Oct 06 '16 at 23:42
  • @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. – Rohit Arora Oct 12 '16 at 05:30
  • @Leo I have tried it in all browsers but i think firefox does not support this. – Rohit Arora Oct 12 '16 at 05:31
  • have you tried handling it? https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events/Pinch_zoom_gestures like that – Evochrome Oct 12 '16 at 20:04
  • @Evochrome 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](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Browser_compatibility) – Rohit Arora Oct 13 '16 at 05:07

2 Answers2

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">
MajiD
  • 2,420
  • 1
  • 22
  • 32
  • Could you explain why the added parameters help in disabling pinch to zoom or what they do exactly? – David Schumann Jul 17 '17 at 11:47
  • **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 – MajiD Jul 17 '17 at 12:44
  • 1
    No luck...This does not work for firefox. I have tried it again. – Rohit Arora Jul 27 '17 at 05:14
-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

Varun Kumar
  • 344
  • 2
  • 24
  • 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. – Rohit Arora Oct 12 '16 at 05:32
  • 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 – Varun Kumar Oct 12 '16 at 05:50
  • So, don't we have any option to implement our pinch zoom on the page ? – Rohit Arora Oct 12 '16 at 05:58