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.
