我见过
touch-action: manipulation;
在应用于按钮和链接的各种网站的CSS中。我很好奇这是什么目的?
上的值touch-action CSS属性指定是否以及以何种方式执行操作 给定区域可以由用户操纵(例如,通过平移 或缩放)。
自动 用户代理可以确定任何允许的触摸行为,例如 作为视口的平移和缩放操作,用于触摸 从元素开始。
none:使用此值可禁用所有内容 默认行为并允许您的内容处理所有触摸输入 (从元素开始的触摸不得触发默认触摸 行为)。
泛X: 用户代理可以考虑开始的触摸 该元素仅用于水平滚动的目的 元素最近的祖先,具有可水平滚动的内容。
泛Y: 用户代理可以考虑仅在元素上开始的触摸 垂直滚动元素最近的祖先的目的 具有垂直可滚动内容。
操作:用户代理可以 考虑仅为了目的而在元素上开始的触摸 滚动和连续缩放。支持任何其他行为 by auto超出了本规范的范围。
但我不明白将此应用于大多数链接/按钮的想法是什么。这是否可以防止使用默认值auto?
时通常会出现的常见问题答案 0 :(得分:4)
根据sitepoint post,touch-action: manipulation
通过删除每个事件检测延迟来帮助阻止PointerEvents
点火。例如,双屏事件可能会在双击屏幕时触发,直到300ms案例touch-action: manipulation
未被声明为止。
简短的引用:
大多数基于触摸的移动浏览器在您点击屏幕和浏览器之间等待300毫秒,为该事件触发相应的处理程序。它的实现是因为您可以双击以将页面缩放到全宽。因此,浏览器会等待三分之一秒 - 如果您不再点击,则会激活“点击”。
...
微软已经解决了PointerEvents中许多基于触摸的问题 规格。例如,如果是,则不会触发指针事件 用户正在滚动页面。
还有一个允许的非标准CSS触摸操作属性 您要删除特定元素或整个文档的延迟 不禁用缩放缩放:
a,按钮,.myelements {...}
我不确定情况,这取决于您是否对屏幕点击不满意,所以比较会是一个好主意。
答案 1 :(得分:0)
我将 touch-action: manipulation
分配给一个按钮,以避免双击时在手机上放大页面。