How to disable the double-tap “zoom” option in the browser on touch devices with CSS?

Spread the love

Sometimes, we want to disable the double-tap "zoom" option in the browser on touch devices with CSS.

In this article, we’ll look at how to disable the double-tap "zoom" option in the browser on touch devices with CSS.

How to disable the double-tap "zoom" option in the browser on touch devices with CSS?

To disable the double-tap "zoom" option in the browser on touch devices with CSS, we set the touch-action property.

For instance, we write

<p class="disable-dbl-tap-zoom">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>

to add a p element.

Then we write

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

to add the touch-action: manipulation; style to disable the double-tap "zoom" option in the browser on touch devices on the p element.

Conclusion

To disable the double-tap "zoom" option in the browser on touch devices with CSS, we set the touch-action property.

Leave a Reply

Your email address will not be published.