touch-action常用的几个属性

问题: 在移动端自定义的键盘的数字键盘上,当快速的点击某个数字时,页面会被放大。
原因: 因为双击出发了浏览器的默认放大操作。
解决: 可以在css里设置touch-action的属性来取消浏览器的默认操作

touch-action: auto

默认值,表示由浏览器觉得进行什么操作,比如在viewport里设置的操作

touch-action: manipulation

只允许滚动和持续缩放,其他默认支持的行为都会被禁用;例如双击缩放

  • 等同于 touch-action: pan-x pan-y pinch-zoom;
  • pan-x/pan-y: 可以水平/垂直移动
  • pinch-zoom: 可以缩放页面,用手指头缩放的那种

注意: 以上两个属性值是Safari唯一支持的


touch-action: none

发生触控事件时,不进行任何操作

  • 在Safari浏览器中,改属性是不生效的,包括ios10+ 设置的viewport的user-scalable=no,都无法阻止用户缩放页面
发布了66 篇原创文章 · 获赞 13 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/haoyanyu_/article/details/94559896