CSS使用touch-action属性控制设备的触摸行为
touch-action 属性是 CSS 的一个属性，用于控制浏览器在用户与触摸屏交互时如何处理触摸事件，例如滚动、缩放和平移。它允许开发者禁用或启用默认的浏览器触摸行为，从而实现更精细的触摸控制和更好的用户体验，尤其是在 Web 应用程序和游戏中。

touch-action 的主要用途包括：

禁用默认浏览器行为: 这对于创建自定义的触摸手势或控件至关重要。例如，如果你正在构建一个可拖动的元素，你可能希望禁用默认的滚动行为，以便用户可以自由地拖动元素而不会触发页面滚动。

优化滚动性能: 通过指定滚动方向，浏览器可以优化滚动性能，减少滚动时的延迟和卡顿。

实现平滑的缩放和旋转: touch-action 可以帮助开发者实现更平滑的缩放和旋转操作，避免浏览器默认的缩放行为带来的干扰。

创建自定义手势: 结合 JavaScript 的触摸事件 API，touch-action 可以帮助开发者创建各种自定义手势，例如双指缩放、旋转和滑动。

以下是 touch-action 的一些常用值及其作用：

auto (默认值): 浏览器根据自身策略处理触摸事件。通常情况下，这意味着浏览器会处理滚动和缩放等默认行为。

none: 禁用所有浏览器默认的触摸行为。这意味着开发者需要使用 JavaScript 完全控制触摸交互。

pan-x: 允许水平平移 (例如，水平滚动)。

pan-y: 允许垂直平移 (例如，垂直滚动)。

pan-x pan-y: 允许水平和垂直平移。

manipulation: 允许平移和缩放，但禁用其他操作，例如双击缩放。这通常用于需要平滑平移和缩放的场景，例如地图或图像查看器。

pinch-zoom: 允许缩放。

double-tap-zoom: 允许双击缩放。