Share via

How to implement the -ms-touch-action: none property to disable Double-tap-zoom on Windows Touch devices

  • Article

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

 

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

Comments

  • Anonymous
    June 04, 2013
    wouldn't using the "ms-content-zooming: none;" on the body tag be more effective and appropriate? If not then why not? msdn.microsoft.com/.../hh441251.aspx
  • Anonymous
    June 05, 2013
    Renzo: Either will prevent Zooming / Double-tap-zoom in windows touch devices, which is what I was trying to illustrate. And in fairness, the blog was inspired by a specific scenario I worked on and I should have clarify that. Thanks for your time and providing your feedback/comment as it does helps us provide quality content!REF: -ms-content-zooming - msdn.microsoft.com/.../hh771891(v=vs.85).aspxREF: -ms-touch-action - msdn.microsoft.com/.../hh772044(v=vs.85).aspx
  • Anonymous
    June 23, 2016
    Is it different that using "user-scalable=no" in the meta viewport?