Detecting browser zoom – mousemove

Using mouse move events to detect whether browser is zoomed or not.

HTML

<div>
Is browser in zoom:
<span class="isZoomValue"></span>
</div>
<div>
Distance difference:
<span class="difference"></span>
</div>

JavaScript

var firstPoint;
var valueContainer = document.querySelector('.isZoomValue');
var differenceContainer = document.querySelector('.difference');

window.addEventListener('mousemove', function(event) {
  if (!firstPoint) {
    firstPoint = createPoint(event);
  } else if (getDistance(event, firstPoint, 'client') >= 100) {
    var secondPoint = event;
    var clientDistance = getDistance(event, firstPoint, 'client');
    var screenDistance = getDistance(event, firstPoint, 'screen');
    valueContainer.innerText = clientDistance !== screenDistance;
    differenceContainer.innerText = (clientDistance - screenDistance);
    firstPoint = null;
  }
});

function createPoint(event) {
  return {
    clientX: event.clientX,
    clientY: event.clientY,
    screenX: event.screenX,
    screenY: event.screenY
  };
}

function getDistance(pointA, pointB, property) {
  var x = pointA[property + 'X'] - pointB[property + 'X'];
  var y = pointA[property + 'Y'] - pointB[property + 'Y'];
	return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
}