javascript - Detect touch device pinch-level (zoom) - Stack Overflow

admin管理员组

文章数量:1389772

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

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

• javascript
• touch

Share Improve this question Follow edited Sep 3, 2020 at 12:57 Patrick asked Sep 3, 2020 at 12:46 PatrickPatrick 46311 gold badge55 silver badges2020 bronze badges 2

• You might need to check this out first: stackoverflow./questions/1713771/… – Joimee Cajandab Commented Sep 3, 2020 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 Commented Sep 4, 2020 at 5:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

It's fairly simple actually:

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

I had the same problem. The best way I found is paring window.innerWidth to window.visualViewport.width . If they are equal, the page is zoomed out, if not then window.innerWidth is bigger (window.visualViewport.width is returned in CSS pixels, which means that if there's a zoom there are fewer CSS pixels on the actual screen becauze the CSS pixel bees bigger). Their ratio is the zoom level.

Some caveats:

1. window.visualViewport.width is a float value while window.innerWidth is integer, so the float might differ from the integer by some small fraction of an integer. That is, even if the page is zoomed out, the ratio may not be exactly 1 but very close. If it's something between 0.99999 and 1.00001, we can safely assume it's zoomed out. (Or better, subtract them and if the result is less than 1/10 in absolute value, then it's zoomed out.)
2. According to the documentation found here:
   https://developer.mozilla/en-US/docs/Web/API/VisualViewport
   it should work, and be patible with all modern browsers. But so should be window.visualViewport.scale, and I found it to give wrong results on my Android 13 phone. The method I indicated seems to work fine on it but I haven't tested it properly not even on my own device let alone many others. So, it still might be buggy on some. I just gave it as the best hint I have at this point, if anybody wants to try it out.

本文标签： javascriptDetect touch device pinchlevel (zoom)Stack Overflow