我们可以检测移动端缩放是否触发resize事件吗？

Question

我使用由

resize

触发的函数来动态调整页面布局，我用它来确保当用户在移动设备上扩展/缩小地址栏时我的页面看起来不错。但现在我发现有时当用户使用两根手指或双击放大或缩小时也会触发

resize

，在这种情况下我不希望触发与

resize

事件相关的功能。

有没有办法检测缩放是否触发

resize

事件？

Answer 1

首先，您可以使用缩放元标记在移动设备上禁用缩放捏合功能，如下所示：

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

但是，如果您仍然希望用户能够捏合缩放，那么您可以观察“devicePixelRatio”值的变化。这个值实际上指的是设备规模：

window.devicePixelRatio

Answer 2

最近在 iPhone 上遇到了这个问题。我发现了这个活动并且效果很好：

visualViewport.addEventListener("调整大小", () => {

});