キャンバスを反応させるのは、ウィンドウのサイズを変更するときで、ズームしないときにのみにします。

Question

私は960px幅と960px高さの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; 
} 

私の問題は、私は、デスクトップやモバイルブラウザのいずれかで拡大すると、ズームもwindow.innerWidthとwindow.innerHeightの値を変更するので、ゲームはまた、自身のサイズを変更しています。しかし、私は、ウィンドウのサイズが変更されたときにゲームのサイズを変更するだけで、目が完全ではない人のために（特に小型モバイルのスクリーンで）ズームできるようにしたいと考えています。

私は今何週間もさまざまな方法を試してきましたが、解決策はまだ見つかりませんでした。私は比較的初心者なので、誰かがあまりに複雑ではない解決策を考え出すことができれば、私はとても幸せになれます。あらかじめThx。

Answer 1

ズームインおよびズームアウト時に、devicePixelRatioの値が変更されます。
この値をinitで保存し、resizeイベントで変更されているかどうかをチェックして、イベントが実際のウィンドウのサイズ変更によって引き起こされたかどうかを確認したり、ズームしたりすることができます。

let dpr = window.devicePixelRatio; 
 
onresize = e => { 
 
    if(window.devicePixelRatio !== dpr){ 
 
    log.textContent = 'zoom event'; 
 
    dpr = window.devicePixelRatio 
 
    } 
 
    else{ 
 
    log.textContent = 'resize event'; 
 
    } 
 
    };

<pre id="log">Please see in full-page. 
 
Then, either zoom or resize the window</pre>

またはfiddleとして。