检测触摸设备捏合程度（缩放）

Question

假设默认级别等于“1”，是否可以检测触摸设备的捏合（缩放）级别？原因是我希望根据捏合级别禁用页面元素（显示：无）。

如果可以将其放在一个设置缩放级别值的函数中，那就太好了，例如：

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

感谢您的帮助

Answer 1

其实很简单：

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

Answer 2

我也有同样的问题。我发现的最好方法是将 window.innerWidth 与 window.visualViewport.width 进行比较。如果它们相等，则页面会缩小，如果不相等，则 window.innerWidth 更大（window.visualViewport.width 以 CSS 像素返回，这意味着如果进行缩放，则实际屏幕上的 CSS 像素会更少，因为 CSS像素变大）。它们的比例就是缩放级别。

一些注意事项：

1. window.visualViewport.width 是浮点值，而 window.innerWidth 是整数，因此浮点值可能与整数相差一小部分整数。也就是说，即使页面缩小，该比例也可能不完全是1，但非常接近。如果它介于 0.99999 和 1.00001 之间，我们可以放心地假设它已缩小。 （或者更好的是，将它们相减，如果结果的绝对值小于 1/10，则将其缩小。）
2. 根据此处找到的文档：
   https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport
   它应该可以工作，并且与所有现代浏览器兼容。但 window.visualViewport.scale 也应该如此，我发现它在我的 Android 13 手机上给出了错误的结果。我指出的方法似乎运行良好，但我还没有正确测试它，甚至在我自己的设备上也没有，更不用说许多其他设备了。因此，它对某些人来说仍然可能存在问题。如果有人想尝试的话，我只是将其作为我目前拥有的最好提示。