How to implement the -ms-touch-action: none property to disable Double-tap-zoom on Windows Touch devices
In this quick blog post I will provide you with steps on how to implement the Cascading Style Sheet Touch Zooming property to disable Double-tap-zoom functionality on your html page.
SCENARIO:
A new Windows 8 Touch Capable device is deployed on your environment. The developer wants to disable full page double-tap-zoom functionality.
DEFAULT BEHAVIOR:
When a user touches an element, that element's -ms-touch-action property determines the default touch behaviors permitted for that contact, like panning or zooming and double-tap-zoom is available.
IMPLEMENTATION:
By using -ms-touch-action: none; on your body tag, it will disable double-tab-zoom
SAMPLE HTML CODE:
<!DOCTYPE html> <htmllang="en"xmlns="https://www.w3.org/1999/xhtml"> <head> <title> -ms-touch-action: none - DISABLE DOUBLE-TAP-ZOOM TEST SAMPLE </title> <meta content="IE=edge" http-equiv="X-UA-Compatible"/> <meta charset="utf-8"/> <style type="text/css"> body { -ms-touch-action: none !important; /* DISABLE DOUBLE-TAP-ZOOM */ } .zoomElement {overflow: auto; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 500%;} .ManipulationContainer {width: 480px; height: 270px;} .ManipulationContainer.zoomElement {border-width: 0.5px; border-style: solid; -ms-overflow-style: none;} .zoomElement img {width: 480px; height: 270px;} </style> </head> <body> <h1>Using -ms-touch-action: none to disable Double-tap-zoom on Touch devices</h1> <p>In this scenario added ms-touch-action: none !important; to the Body TAG to DISABLE DOUBLE-TAP-ZOOM</p> <div> <h2>Description</h2> <div> <p>This page is using the <strong>-ms-touch-action: none</strong> property in the body tag to prevent double-tap-zooming. </p> <h2class="codeLabel">CSS CODE</h2><pre> body { -ms-touch-action: none; /* DISABLE DOUBLE-TAP-ZOOM */ } </pre></div></div> <div id="zoomElement" class="ManipulationContainer zoomElement"><img id="zoomContent" alt="Sunset" src="https://i.msdn.microsoft.com/dynimg/IC582458.jpg"/></div>
<h1>RESULT</h1> <p>Try to double-tap-zoom. This functionality is disabled for the html body of this page. However, if try to zoom the image in this page, it will still work as I defined a different class for this element.</p> </body> </html> |
CONCLUSION:
Developers have the flexibility to easily control each element using these cascading style properties.
MORE INFORMATION:
For more information on other Property values, visit our MSDN link: https://msdn.microsoft.com/en-us/library/windows/apps/Hh767313.aspx