캔버스는 창의 크기를 조정할 때만 응답하고 확대 할 때는 만들지 마십시오.

Question

너비가 960px이고 높이가 html5 인 캔버스 게임입니다. 나는 자바 스크립트를 사용하여 캔버스의 크기를 조정하고 내용을 비율에 맞게 세로 및 가로로 항상 맞게 조정하여 많은 화면이 960 픽셀 이하이고 일부 사용자가 확대/축소 할 수 있다는 것을 알지 못하기 때문에 맨 아래가 잘리지 않도록합니다. 데스크탑 브라우저로 컨텐츠를 맞추십시오. 코드는 다음과 같습니다

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 이벤트에서 변경되었는지 확인하여 이벤트가 실제 크기 조정에 의해 트리거되었는지 또는 확대/축소로 결정되었는지 확인할 수 있습니다.

아니면 fiddle로

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>

.