一、Chrome浏览器双指触摸的模拟
结果是模拟不了。
页面整体缩放行为是可以通过按住Shift键+页面左键模拟的，但是，实际上，还是一个触摸点，因此无法模拟双指缩放行为。
除非是有触摸板，或者屏幕就是触摸屏。
否则，只能连手机进行调试了。
二、触摸屏与event.touches
在触屏设备下，要判断是单指还是多指操作，可以通过 event.touches 数组对象的长度判断。
例如：
document.addEventListener('touchstart', function (event) { var touches = event.touches; if (touches.length == 1) { console.log('单指'); } else if (touches.length >= 2) { console.log('多指'); } });按照我们的理解，上面的逻辑应该是无懈可击的。
实际上并不是。
我一开始也是在 'touchstart' 事件中判断是单指还是双指，结果发现了奇怪的现象，有时候是单指，有时候是双指，双指复现的概率可能不到1成。
这可真是奇怪了。
后来一番测试，终于弄清楚原因了。
只有当两个指头同时触摸屏幕的时候，才能在touchstart事件中被识别为双指操作。
这太难了，没有谁的两个指头是一样长的，很难同一时间戳中屏幕的。
因此，双指事件的判断需要在 touchmove 事件中才行。
三、双指行为的判断
代码如下：
document.addEventListener('touchmove', function (event) { if (event.touches && event.touches.length == 2) { console.log('双指在移动'); } });四、双指缩放功能的实现
双指缩放功能的实现的难点就是缩放比例的计算。
event.touches 中的每一项都是触摸点对象，包含了触碰的元素以及触摸点的坐标。
其中，触摸点的坐标就可以用来计算缩放比例。
我们记录下第一次双指行为发生时候的两个手指点的坐标值，于是就可以计算出这两个指头之间的距离；
然后继续 touchmove 的时候，实时计算出新的两个手指的坐标距离。
一开始的距离/现在的距离 = 应该缩放的比例。
如下图所示：
实例演示
假设页面上有一张图片元素，要实现这种图片的双指缩放预览效果：
<img id="image" src="1.png">则可以试试使用下面所示的js代码：
var eleImg = document.querySelector('#image'); var store = { scale: 1 }; // 缩放事件的处理 eleImg.addEventListener('touchstart', function (event) { var touches = event.touches; var events = touches[0]; var events2 = touches[1]; event.preventDefault(); // 第一个触摸点的坐标 store.pageX = events.pageX; store.pageY = events.pageY; store.moveable = true; if (events2) { store.pageX2 = events2.pageX; store.pageY2 = events2.pageY; } store.originScale = store.scale || 1; }); document.addEventListener('touchmove', function (event) { if (!store.moveable) { return; } event.preventDefault(); var touches = event.touches; var events = touches[0]; var events2 = touches[1]; // 双指移动 if (events2) { // 第2个指头坐标在touchmove时候获取 if (!store.pageX2) { store.pageX2 = events2.pageX; } if (!store.pageY2) { store.pageY2 = events2.pageY; } // 获取坐标之间的举例 var getDistance = function (start, stop) { return Math.hypot(stop.x - start.x, stop.y - start.y); }; // 双指缩放比例计算 var zoom = getDistance({ x: events.pageX, y: events.pageY }, { x: events2.pageX, y: events2.pageY }) / getDistance({ x: store.pageX, y: store.pageY }, { x: store.pageX2, y: store.pageY2 }); // 应用在元素上的缩放比例 var newScale = store.originScale * zoom; // 最大缩放比例限制 if (newScale > 3) { newScale = 3; } // 记住使用的缩放值 store.scale = newScale; // 图像应用缩放效果 eleImg.style.transform = 'scale('+ newScale +')'; } }); document.addEventListener('touchend', function () { store.moveable = false; delete store.pageX2; delete store.pageY2; }); document.addEventListener('touchcancel', function () { store.moveable = false; delete store.pageX2; delete store.pageY2; });大家可以访问这个地址（如果手机访问本文）： https://www.zhangxinxu.com/study/202006/resize.html
双指缩放效果就可以体验了，最大比例做了限制，最小比例没有做限制。
广州vi设计公司 http://www.maiqicn.com 我的007办公资源网 https://www.wode007.com
五、结语以及其他
demo页面的 touchmove 没有设置 passive:false 也没有报错，是因为 html 标签设置了如下css：
html { touch-action: none; }如果有兴趣了解背后原理，可以访问这篇文章： touch-action简介与treated as passive错误解决
本文是自己实际工作实践中的一点手机中双指缩放图片的经验分享，考虑到自己以后遇到类似需求可能还会用到，所以记录下，希望可以帮到有类似需求的小伙伴。