关于css中touch-action属性 在移动端开发中遇到的问题

初次接触

第一次接触touch-action这个属性 是在之前一个网约车公众号项目中遇到的 当时采用的是vue做框架 cube-ui做组件库

当时在版本迭代的时候增加了余额支付的功能 需要一个密码键盘 种种原因没有引入第三方插件  而是选择了手写

样式如下图：

当连续快速点击某个数字时，在ios端出现了强制缩放，百度一圈发现了这个属性,

*{touch-action: manipulation}加上之后很管用

再次使用

在另一个烟草类微信公众号项目里，又一次使用了这个属性但是值使用了 *{touch-action: none}  这个项目中列表使用了上拉加载的功能，在开发过程中我一直使用ios在测试 没有发现滑动有什么问题 但是在提交测试后发现，在Android端表现为自己写的列表无滑动效果（swiper正常），移除该属性恢复正常

附上MDN链接 https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action