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, 
    ... 
    });