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>
<htmllang="en"xmlns="http://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>
<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="http://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>
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: http://msdn.microsoft.com/en-us/library/windows/apps/Hh767313.aspx