在触摸设备上的浏览器中禁用双击“缩放”选项

2023-12-06

我想要disable the 双击缩放功能性在指定元素上在浏览器中(在触摸设备上),无需禁用所有缩放功能.

例如:可以多次点击一个元素来发生某件事。这在桌面浏览器上运行良好(如预期),但在触摸设备浏览器上,它会放大。


仅 CSS 解决方案

Add touch-action: manipulation到您想要禁用双击缩放的任何元素,如下所示disable-dbl-tap-zoom class:

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}
<button>plain button</button>

<button class="disable-dbl-tap-zoom">button with disabled double-tap zoom</button>

<p>A <b>plain</b> paragraph. 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>

<p class="disable-dbl-tap-zoom">A paragraph <b>with disabled double-tap zoom</b>. 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>

来自touch-action文档(强调我的):

操纵

启用平移和捏合缩放手势,但是disable其他非标准手势,例如双击缩放.

该值适用于 Android 和 iOS。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在触摸设备上的浏览器中禁用双击“缩放”选项 的相关文章