css - jsmovie错误地调整精灵图像的大小

Question

我正在尝试使用 jsMovie ( http://jsmovie.konsultaner.de/#/ ) 创建精灵动画。它在桌面浏览器上运行良好，但在移动设备上表现异常。

我已经设置了一个测试：http ://www.virtualgraphicstudio.com/test/ fps 比率慢，因此您可以在移动设备上发现问题。看起来移动浏览器错误地采用了切片尺寸，我找不到原因。

这是我的代码：

        $('#battery').jsMovie({
            images : ['battery.jpg'],
            folder : 'sprites/',
            height : 394, width: 700,
            grid   : {height:394, width:700, columns:20, rows:8},
            showPreLoader : false,
            playOnLoad    : true,
            playBackwards : false,
            repeat: true,
            fps:5
        });


        $('#battery').jsMovie('addClip','battery_in',1,120);
        $('#battery').jsMovie('addClip','battery_loop',121,125);

        $('#battery').on('ended', function() {
            $('#battery').jsMovie('playClip', 'battery_loop', true, true);
        });

和html

<div id="wrapper" style="position: relative; top: 0; left: 0; width:700px; height: 394px; background-color:red">
    <div id="image"></div>
    <div id="hotspots" style="z-index: 1"></div>        
    <div id="videos" style="z-index: 2; position: absolute; top: 0; left: 0; width:700px; height: 394px; background-color:green">
        <div id="battery"></div>
    </div>
</div>

Answer 1

我想我找到了原因...... http://www.williammalone.com/articles/html5-javascript-ios-maximum-sprite-frames/