Machen Sie Canvas responsive nur beim Ändern der Größe Fenster und nicht beim Zoomen

Question

Ich habe eine 960px Breite und 960px Höhe html5 Leinwand Spiel. Ich benutze Javascript, um die Größe der Leinwand zu ändern und den Inhalt proportional anzupassen, um das Fenster immer vertikal (und horizontal) zu passen, so dass die Unterseite nie abgeschnitten wird, da viele Bildschirme weniger als 960 Pixel hoch sind und einige Benutzer nicht einmal wissen, dass sie zoomen können mit einem Desktop-Browser aus, um den Inhalt anzupassen. Der Code ist:

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; 
} 

Mein Problem ist das Spiel paßt die Größe selbst auch, wenn ich entweder in einem Desktop oder in einem mobilen Browser vergrößern, da das Zoomen auch window.innerWidth und window.innerHeight Werte ändert. JEDOCH möchte ich, dass das Spiel seine Größe nur dann ändert, wenn das Fenster in der Größe verändert wird, aber immer noch in der Lage sein soll (vor allem in kleinen mobilen Schirmen) für Menschen, deren Augen nicht so perfekt sind, zu vergrößern.

Ich habe seit Wochen verschiedene Methoden gesucht und getestet, aber noch keine Lösungen gefunden. Ich würde mich sehr freuen, wenn jemand eine nicht ganz so komplizierte Lösung finden könnte, da ich relativ Anfänger bin. Danke im Voraus.

Answer 1

Beim Ein- und Auszoomen ändert sich der Wert devicePixelRatio.
Sie können diesen Wert also bei init speichern und prüfen, ob sich das resize-Ereignis geändert hat, um festzustellen, ob das Ereignis durch eine tatsächliche Größenänderung des Fensters oder durch Zoomen ausgelöst wurde.

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>

Oder als fiddle.