android - jQuery wScratchPad:响应式设计？

我已将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>

需要“宽度”和“高度”来计算覆盖的画布和用于显示背景图像的像素。

有什么方法可以使暂存区域大小适应窗口大小？

最佳答案

您可以尝试的一种解决方案是使用document.documentElement.clientWidth / clientHeight将暂存器的尺寸设置为浏览器视口尺寸的百分比。例如：

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

关于android - jQuery wScratchPad:响应式设计？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20197899/