Zooming or wheeling on a mobile browser

Question

In a desktop browser, I detect the mouse wheel use with the standard mousewheel or DOMMouseScroll events. I can thus change a canvas (zooming in a kind of map).

Now I want to bring this feature to my mobile users : I need to intercept the standard pinch-zoom gestures (without zooming the page). Is that possible today ? Is it possible to get the center of the gesture (for localized zoom and unzoom) ?

Note that it needs to work on the standard browser of Android 4.2. Other browsers/devices aren't in the scope of this question, which may make it easier.

have you seen this, too: http://stackoverflow.com/questions/11517086/how-to-detect-android-pinch-zoom-in-javascript/11517102#11517102 — Stephan, Nov 29 '12 at 15:45
@Stephan I hadn't. This is interesting, I'm testing it now. It's not very precise (obviously it doesn't get the localized zoom events interpreted by the OS) but it might be a workaround. Thanks. Don't hesitate to make an answer so that I can throw 10 rep at you ;) — Denys Séguret, Nov 29 '12 at 15:59

score 2 · Accepted Answer · answered Nov 29 '12 at 15:43

2

This seems fixed on 3.0. This is a test page that seems to work on my ICS tablet. This is an excerpt from the linked test page:

// Touch events seem to work in iOS, Android browser 3.0 and up,
// and various 3rd-party Android browsers, now including FireFox
// (Nightly as of 03-Feb-2012, not enabled by default yet).
eventTarget.addEventListener('touchstart', HandleTouchStart, false);
document.addEventListener('touchmove', HandleTouchMove, false);
document.addEventListener('touchend', HandleTouchEnd, false);
document.addEventListener('touchcancel', HandleTouchCancel, false);

answered Nov 29 '12 at 15:43

Raffaele

20,627
6
47
86

This might come very "handy" (so have an upvote) but this doesn't make directly a pinch zoom gesture : I'll have to interpret the positions myself (which might not be very good) in order to guess it's a zoom or an unzoom. – Denys Séguret Nov 29 '12 at 15:53
I've never heard of `gesture*` events :) A quick googlin didn't enlight me (especially on Android), but I'd rather switch to a native app at this point - even if you must certainly have valid reason to stick with a browser one – Raffaele Nov 29 '12 at 17:13
1

I built my solution around touchstart, touchmove and touchend, it works very well. Your answer was in the good direction, thanks. – Denys Séguret Dec 03 '12 at 17:30

score 1 · Answer 2 · edited May 23 '17 at 12:32

1

This question has an answer pointing to a library (Hammer.js) that could be of some use: How to detect android pinch zoom in javascript

edited May 23 '17 at 12:32

Community

1
1

answered Nov 29 '12 at 16:05

Stephan

1,858
2
25
46

Zooming or wheeling on a mobile browser

2 Answers2