html - 在触摸设备上的浏览器中禁用双击 "zoom"选项

Question

我想在浏览器(在触摸设备上)禁用双击缩放功能指定元素，没有禁用所有缩放功能。

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

Answer 1

注意(截至 2020-08-04):此解决方案似乎不适用于 iOS Safari v12+。一旦找到涵盖 iOS Safari 的明确解决方案，我将更新此答案并删除此注释。

纯 CSS 解决方案

将 touch-action: manipulation 添加到您想要禁用双击缩放的任何元素，如以下 disable-dbl-tap-zoom 类:

.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文档(强调我的):

manipulation

Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom.

此值适用于 Android 和 iOS。