用途:在指针是手指的场景下设计触屏交互,把触屏版本当作真实版本,精细指针版本作为变体。范围止于接触瞬间——尺寸、位置、延迟、哪个轴获胜;手指移动后的速度、弹簧、回弹等交给 gestures,键盘顺序、焦点与 ARIA 属于 a11y,是否像已安装应用属于 native-feel。
主要能力与原则:命中区至少 44×44,视觉可任意,图标保持 24px 并用 min-width: 44px; min-height: 44px 或 ::before { inset: -10px } 扩大;行内文本中的目标受 WCAG 2.2 SC 2.5.8 约束,硬下限 24×24 CSS px 且需清晰间距。相邻独立控件之间留至少 8px 死区,并检查扩大后的命中区不重叠。悬停必须按能力门控,用 @media (hover: hover) and (pointer: fine),不要用宽度断点;任何操作都不能只能通过悬停或长按触达。按下反馈在 pointerdown 触发,动作在 pointerup 提交,约 10px 容差;破坏性操作只在释放时提交且可拖离取消。用 touch-action: manipulation 消除残留点按延迟,自实现平移或缩放的表面用 none,但绝不要给滚动容器设 none。滚动轴在手势开始前用 CSS 声明:垂直滚动容器内可横向拖动的子元素用 pan-y,横向轮播用 pan-x,首次移动后锁定轴。面板边界用 overscroll-behavior: contain 阻止滚动穿透;文档根上的 overscroll-behavior-y: none 会同时禁用下拉刷新。手机上主操作放在底部拇指弧内,破坏性操作刻意放在自然弧外。
使用方式:在项目现有响应式与样式系统中工作,优先扩展现有的 hover: 变体策略、size-* 尺度或触控目标工具类,而不是另加原始媒体查询。检查交互库(Vaul、Embla、use-gesture、Radix)是否已接管该组件的 touch-action 与指针捕获,两个库同时设置同一元素的 touch-action 是只在真机复现的 bug。即使当前只面向桌面,也建议加能力查询。iOS Safari 专属问题(输入缩放、视频自动播放、视口高度、点按高亮、滚动锁定)参考 references/platform-quirks.md。
限制:资料未提供安装命令、依赖、平台支持范围、收费与价格信息;需在真机而非仅缩放桌面窗口上测试。