linux触摸屏两指缩放_你需要的移动端多点触控双指缩放

2020年12月01日 阅读 2452 关注

你需要的移动端多点触控双指缩放

作为前端切图仔，经常会和移动端打交道，对于移动端来说，存在多个接触点同时操作的情况，和双手缩放的问题，于是思考了一下，学习移动端开发手势的的知识，实现双指缩放。

前言

我们开发的PC页面，只能通过鼠标去点击，移动端页面，存在着多点触控的问题，我们经常会在移动端页面用手势去操作页面，放大和缩小的问题。大部分的移动设备(手机/ipad)都支持多点触控，开发者针对不同的手势可以实现不同的功能，所以今天主题就是针对多点触控和双指缩放展开。

常见的案例场景

ios和android手机的多点触控

ios和android支持多点触摸和手势操作，浏览器为多点触摸提供一个包含touches数组的事件，包含所有多点触摸对象，多点触摸对象触发

渐进增强思想

手势操作方便了用户，给用户带来了极大的便利，但是手势不能总是使用，总是操作手势并不是我们想要的渐进增强思想。有些浏览器并不是支持多点触控，需选择适合普通点击结合触摸事件交互的页面，手势只是增强这一交互。

触摸事件

既然是要渐进增强，那就必须从基础点击和触摸事件说起，点击事件就不再多说，关于触摸事件，之前也有一篇文章介绍过移动开发之轻触与单击事件，关于触摸四种基础事件和事件对象，这里要对触摸事件的处理进行说明。

浏览器兼容：

通常我们在触摸和手势事件处理函数内会添加CSS3动画处理，这个时候需要进行浏览器兼容处理。

var TRANSITION = 'transition';

var TRANS