如何在iOS中捏缩放到100％时返回缩放答案

【问题标题】：How to return the zoom when pinch to zoom to 100% in iOS如何在iOS中捏缩放到100％时返回缩放
【发布时间】：2023-04-04 22:40:01
【问题描述】：

当用户在 iOS 中进行捏合缩小时，我们希望将其返回到正常视图（100%）

由于我们的项目，我们不能使用touchstart或touchmove

我们在下面有这段代码，但不起作用。

document.addEventListener('touchend', function(event) {
  if (window.visualViewport.scale != 1) {
    document.body.style.transform = 'scale(1)';
  }
}, {passive: false});

我们也试过了，

document.body.style.zoom = 1;

在捏缩放时，我们是否可以强制返回 100% 缩放？任何帮助将不胜感激。

完整的 HTML 代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <script>
    document.addEventListener('touchend', function(event) {
      if (window.visualViewport.scale != 1) {
        document.body.style.transform = 'scale(1)';

        //document.body.style.zoom = 1;
        //window.visualViewport.scale = 1;
      }
    }, {
      passive: false
    });
  </script>

  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      background-color: green;
      overflow: hidden;
    }
  </style>
</head>

<body>

</body>

</html>

【问题讨论】：

您希望用户根本无法缩放吗？
@learningtoanimate 是的，但我们不能使用 touchstart 或 touchmove

标签： javascript css ios mobile

【解决方案1】：

如果您根本不希望用户能够缩放（而不是在每次尝试缩放时都重置），您只需要在 viewport 元标记中添加 user-scalable=no"。

试试：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

或者：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

或者：

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();      
}, false);

【讨论】：

感谢您的回答，但 iOS 忽略了这一点。仍然可以捏缩放