Windows devices touch issues

In this article i will show you how we can solve the touch issue in windows devices. Now a days we have lot’s of devices are available in the market. So when we are creating a responsive site we have to first fix the device requirement specification from client because we must sure it work properly, user friendly in every device mobile,tablet and desktop and every platform like android,iOS and windows .

Every devices have different specification about touch and it behaves differently. In windows we mostly use IE who handle the touch events differently but in webkit it supports a touch interface that is separate from mouse handling and IE groups the touch,mouse and stylus into a single interface(pointer) it also has been submitted in W3C specification pointer events.

In windows devices IE pointer events model have custom gesture to indicate the area of the page by default gesture handling(pan). we can turn off default gesture handling by using this property -ms-touch-action for example.

However, IE10 on Windows Phone 8 also supports the pan-x and pan-y value of -ms-touch-action property which specify that the browser should handle horizontal or vertical gestures to solve the touch issues in windows, and custom JavaScript handlers should handle everything else.

Note  Microsoft vendor prefixed version of this event (-ms-touch-action) is no longer supported in IE11 and may be removed in a future release. Instead, use the non-prefixed name touch-action, which is better for standards compliance and future compatibility.

Syntax

When a we touches an element, that element’s touch-action property determines the default touch behaviors permitted for that contact, like panning or zooming.

Property values

One of the following values, a combination of the gesture values.

auto

Initial value. Indicates the Windows Store app using JavaScript will determine the permitted touch behaviors for the element.

none

The element permits no default touch behaviors.

pan-x

The element permits touch-driven panning on the horizontal axis. The touch pan is performed on the nearest ancestor with horizontally scrollable content.

pan-y

The element permits touch-driven panning on the vertical axis. The touch pan is performed on the nearest ancestor with vertically scrollable content.

pinch-zoom

The element permits pinch-zooming. The pinch-zoom is performed on the nearest ancestor with zoomable content.

manipulation

The element permits touch-driven panning and pinch-zooming. This is the shorthand equivalent of “pan-x pan-y pinch-zoom”.

double-tap-zoom

The element permits double-tap-zooming. The double-tap-zoom is performed on the full page. Double-tap-zoom is not available in Windows Store apps using JavaScript.

cross-slide-x

The element permits cross-sliding along the horizontal axis.

cross-slide-y

The element permits cross-sliding along the vertical axis.

For more information about web development for windows click here