Javascript 使画布仅在调整窗口大小时响应，而不是在缩放时响应

我有一个960像素宽和960像素高的html5画布游戏。我使用Javascript调整画布的大小，并按比例重新缩放其内容，以始终垂直（和水平）适应窗口，因此底部永远不会被切断，因为许多屏幕的高度小于960px，一些用户甚至不知道他们可以通过桌面浏览器缩小以适应内容。代码是：

var w = stage.canvas.width;
var h = stage.canvas.height;
var scaleFactor;

window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
    scaleFactor = Math.min(window.innerWidth / w, window.innerHeight / h);
    stage.canvas.width = scaleFactor * w;
    stage.canvas.height = scaleFactor * h;
    stage.scaleY = scaleFactor;
    stage.scaleX = scaleFactor;
}

我的问题是，当我在桌面或移动浏览器中缩放时，游戏本身也会调整大小，因为缩放也会更改

窗口.innerWidth

和

窗口.innerHeight

值。然而，我希望游戏只在调整窗口大小时调整自身大小，但对于眼睛不太完美的人，仍然能够缩放（特别是在小型移动屏幕中）

---

几周来，我一直在寻找和尝试不同的方法，但仍然没有找到任何解决方案。如果有人能提出一个不那么复杂的解决方案，我会非常高兴，因为我是一个初学者。

放大和缩小时，

devicePixelRatio

值确实会改变。
因此，您可以在init保存该值，并检查它是否在resize事件中发生了更改，以确定事件是由窗口的实际大小调整触发的，还是通过缩放触发的

让dpr=window.devicePixelRatio；
onresize=e=>{
if（window.devicePixelRatio！==dpr）{
log.textContent='zoom event'；
dpr=window.devicePixelRatio
}
否则{
log.textContent='调整事件大小'；
}
};
请参阅全文。
然后，缩放或调整窗口大小
谢谢您的回答。当我从桌面浏览器的菜单中使用ctrl+/-或zoom时，window.devicePixelRatio确实会改变，因此它解决了我在桌面设备上的问题。然而，不幸的是，在移动浏览器和桌面版Windows平板电脑上，当我按下zoom时，window.devicePixelRatio的值似乎不受影响，并且始终保持不变(