jQuery wScratchPad : 반응 형 디자인?

Question

웹 사이트 프로젝트에 wScratchPad를 추가했습니다. 그리고 효과가 있습니다.

그러나 프로젝트는 반응 형 디자인을 기반으로합니다. 즉, 모든 요소의 크기가 화면 크기에 맞게 조정되므로 모바일 장치에도 최적화되어 있습니다.

사용자가 브라우저 창을 작게 만들더라도 스크래치 영역의 크기는 동일하게 유지되는 경우가 있습니다.

<div id="wScratchPad"></div>  
<script type="text/javascript"> 
     var scratch = function(e, percent){ 
      if (percent > 50) { 
       sp.wScratchPad('clear'); 
      } 
     } 

     var sp = $("#wScratchPad").wScratchPad({ 
      width   : 363, 
      height   : 117, 
      realtimePercent : true, 
      scratchDown: scratch, 
      scratchMove: scratch, 
      cursor:'./cursors/coin.png', 
      scratchUp: scratch, 
      image: './images/1.png', 
      image2: './images/2.png' 
     }); 
    </script> 

오버레이 캔버스와 배경 이미지를 밝힐 픽셀을 계산하는 데 "너비"와 "높이"가 필요합니다.

스크래치 영역 크기를 창 크기에 맞게 조정할 수있는 방법이 있습니까?

Answer 1

시도해 볼 수있는 해결책 중 하나는 스크래치 패드의 크기를 document.documentElement.clientWidth/clientHeight을 사용하여 브라우저보기 포트의 크기 비율로 설정하는 것입니다. 예 :

var sp = $("#wScratchPad").wScratchPad({ 
    width   : document.documentElement.clientWidth/4, 
    height   : document.documentElement.clientHeight/4, 
    ... 
    });