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是各种修饰符。根据{{3}}，它与其他值结合使用：

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。

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

CSS触摸动作无作用于身体，捏缩放元素

2 个答案: