问题: 在移动端自定义的键盘的数字键盘上,当快速的点击某个数字时,页面会被放大。
原因: 因为双击出发了浏览器的默认放大操作。
解决: 可以在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,都无法阻止用户缩放页面