none
disable pinch to zoom, but allow panning on touch screen RRS feed

  • Question

  • I am building a website that runs in IE10 only on a touch screen (kiosk) running windows 8.

    One major usability flaw I cannot seem to disable is the ability of the user to pinch and zoom the content. 

    I found "-ms-touch-action: none;" to work just fine to disable pinch to zoom on static content. But if the page needs to scroll vertically, I must allow y-axis panning ("-ms-touch-action: pan-y;"). When I add this, the user is able to pinch to zoom again, which breaks the experience.

    Any ideas?

    thank you

    Wednesday, August 21, 2013 6:20 PM

Answers

  • Got it working.

    The fix was to apply this to all elements:

    * {
    -ms-touch-action: none;
    -ms-content-zooming: none;
    }

    and target all elements in the div that is scrollable:

    .verticallyScrollableArea * {
    -ms-touch-action: pan-y; 
    }

    I was thinking this was being inherited… but it wasn't. it must be applied to all elements to disable it.
    • Proposed as answer by 网游 - wang'you Thursday, August 22, 2013 10:39 AM
    • Marked as answer by Yanping Wang Wednesday, August 28, 2013 11:17 AM
    Wednesday, August 21, 2013 8:19 PM