2

Is it possbile to detect the pinch (zoom) level for touch-devices, assuming the default level equals '1' ? The reason is that I want page-element(s) disabled (display:none) depending on the pinch level.

It would be nice if it is possible to have it in a single function that sets the zoom level value, something like:

var ZOOM = 1;
function detectPinchZoomLevel(ev){
  /*
      //some calculations here...
      ZOOM = 1.235 ; (for example)
  */
}
document.addEventListener('touchmove',detectPinchZoomLevel}, false);

thanks for help

Patrick
  • 383
  • 1
  • 2
  • 19
  • You might need to check this out first: https://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers#5078596 – Joimee Cajandab Sep 03 '20 at 13:16
  • 1
    thank you, that link helped alot. The answer is using the visualViewport. I'll add a short answer for it – Patrick Sep 04 '20 at 05:53

1 Answers1

5

It's fairly simple actually:

var ZOOM = 1;
var viewport = window.visualViewport;
function resizeHandler() {ZOOM = viewport.scale;}   
window.visualViewport.addEventListener('resize', resizeHandler);
Patrick
  • 383
  • 1
  • 2
  • 19