Pinch / Zoom detection in IE10 without warning default behavior

Question

In Javascript, I am trying to detect when a user is pinched while at the same time allowing them to do this.

var elm = $("#wrapper")[0]; var myGesture = new MSGesture(); myGesture.target = elm; elm.addEventListener("MSGestureChange", handleGesture); elm.addEventListener("MSPointerDown", function (e) { myGesture.addPointer(e.pointerId); }); 

I get an MSPointerDown event.

But as far as I can tell, I need to fine-tune this element (#wrapper) with -ms-touch-action: none (or pan-y pan-x) to get the MSGestureChange event when pinched,

I don't want to obstruct the default behavior, so what are my options?

Is there a way around this, or am I sticking to one or the other?

Answer 1

You can determine the zoom changes by checking the ratio of several window / document / screen variables - see http://jsbin.com/abuzaz/8

Detect scaling changes by registering events in the onscroll window and onresize events. If you are worried that the resize or scroll event becomes “lost” (this may happen), then an ugly solution could also be to register a slow timer with an interval for double checking.

You can determine the current zoom level when scaling by looking at the relationship of document.documentElement.offsetHeight and window.innerHeight , but this can be due to errors / quirks (see below!).

You can determine the page zoom level (ctrl- +) by viewing the changes to screen.deviceXDPI in the onresize event.

For fun, play with the green border at http://jsbin.com/otocer/12 - tap with one finger and then the other, and you will get MSPointerCancel when you touch the second finger. But touch at the same time and you will not receive any event.

You often get a window scroll event on touch, but I'm not sure if you can depend on it 100%. It seems you got a window resize event at the end of touch scaling (but maybe not always - see http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/1065f624-32a8-4c80- 8ced-998ba624763e) - try http://jsbin.com/otocer/17

Note that touching (not scaling the page) has a few big errors:

• Body scroll bars are completely wrong if the body size has changed after scaling - see http://jsbin.com/abuzaz/1 - or see http://connect.microsoft.com/IE/feedback/details/779009/ie10- pinch-zoom-doesnt-adjust-scrollable-area-size-after-body-size-is-changed

• position:fixed wierd - see http://jsbin.com/iciqaf/1 (the pink fixed position can exit the viewport if you scale it, then scroll).

• using CSS html { -ms-touch-action: pan-x pan-y; } html { -ms-touch-action: pan-x pan-y; } push-up until scaling is disabled, but it can make the text of the page unreadable (depending on the device, configuration and page size), and I could not see that -ms-viewport would fix that.

Answer 2

note that this comment is now deprecated with the final version of Windows 8

When reading a document using the css style that you specified -ms-touch-action:none , this is what tells the browser that for this element, the application should create a javascript event that you want to catch. So, in fact, I do not believe that it is possible to have your cake and eat it, either you will receive a JS event, or you will get built-in behavior ( http://msdn.microsoft.com/en-US/library/ie/hh673557. aspx ).