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