JSFiddle - React, Tailwind, and code Playground

Pinch to zoom

by tonytlwu

HTML

<pre id="debug"></pre>

CSS

html, body {
  width: 100%;
  height: 100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>

JavaScript

var funcGestureStart = function (e) {};
var funcGestureChange = function (e) {};
var funcGestureEnd = function (e) {
	if (e.scale < 1.0) {
  	document.querySelector('#debug').innerHTML = 'Zoom out';
  } else if (e.scale > 1.0) {
  	document.querySelector('#debug').innerHTML = 'Zoom in';
  }
};
 
// iOS
document.body.addEventListener('gesturestart', funcGestureStart, false);
document.body.addEventListener('gesturechange', funcGestureChange, false);
document.body.addEventListener('gestureend', funcGestureEnd, false);
 
// Android
var pinchDistance = 0;
var pinchScale = 1;
document.body.addEventListener('touchstart',function(e){
    if(e.touches.length > 1){
        pinchDistance = Math.sqrt(Math.pow((e.touches[1].pageX - e.touches[0].pageX),2)+Math.pow((e.touches[1].pageY - e.touches[0].pageY),2));
        funcGestureStart(e);
    } else {
        pinchDistance = 0;
        pinchScale = 1;
    }
},false);
document.body.addEventListener('touchmove', function (e) {
    if (pinchDistance <= 0 || e.touches.length < 2) {
        return;
    }
    var newDistance = Math.sqrt(Math.pow((e.touches[1].pageX - e.touches[0].pageX),2)+Math.pow((e.touches[1].pageY - e.touches[0].pageY),2));
    pinchScale = newDistance / pinchDistance;
    var event = {scale: pinchScale};
    funcGestureChange(event);
});
document.body.addEventListener('touchend', function (e) {
    if (pinchDistance <= 0 || e.touches.length > 0) {
        return;
    }
    var event = {scale: pinchScale};
    funcGestureEnd(event);
});