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.



A new Windows 8 Touch Capable device is deployed on your environment. The developer wants to disable full page double-tap-zoom functionality.



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.


By using -ms-touch-action: none; on your body tag, it will disable double-tab-zoom



 <!DOCTYPE html>



<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;}




<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>




<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 */ }


<div id="zoomElement" class="ManipulationContainer zoomElement"><img  id="zoomContent" alt="Sunset" src=""/></div>



<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>




Developers have the flexibility to easily control each element using these cascading style properties.



For more information on other Property values, visit our MSDN link:


This blog has been provided to you by The IE SDK Support Team.