css touch-action none 在身体上，在元素上捏缩放

Question

我正在尝试应用这个：

body {
  touch-action: none;
}

.left-side {
  touch-action: pinch-zoom;
}

<div class="left-side"><img src="image.jpg" /></div>

触摸动作：没有工作，但左侧现在是:(

我究竟做错了什么？ 还是身体会覆盖一切？

Answer 1

touch-action值pinch-zoom是各种修饰符。 根据MDN 规范，它与其他值结合使用：

touch-action属性可以指定为：

• 关键字auto 、 none 、 manipulation或
• 关键字pan-x 、 pan-left 、 pan-right之一和/或关键字pan-y 、 pan-up 、 pan-down ，以及可选的关键字pinch-zoom 。

pinch-zoom本身什么都不做，它只是让浏览器知道它应该允许使用两个手指手势； 控制与它一起列出的操作。

因此，如果您想允许多指支持横向平移页面，您可以使用：

.left-side {
   touch-action: pan-x pinch-zoom;
}

注意：请记住，此功能仅适用于触摸设备； 鼠标和可访问系统不会反映任何功能更改。

Answer 2

这些属性并不是它们看起来的样子：

touch-action CSS 属性允许开发人员限制用户如何与元素交互，这对于防止在不必要时调度事件特别有用。

您不能真正添加​​任何已经不存在的触摸交互，但是如果需要，您可以限制那里的触摸交互。 那么pinch-zoom什么作用呢？

如果您在网站上捏合，它通常会放大页面内容。 定义触摸动作将阻止此行为，但添加捏缩放将重新启用此行为。

我不知道任何捏缩放 CSS 解决方案，但它可以使用一些 javascript（ touchstart ， touchmove ， touchend给你你需要的一切）。 还有一些库为常见手势提供了方便的包装器，例如hammerjs 。

您可以 在此处阅读有关触摸操作的更多信息。