Javascript ipad上不显示可拖动的背景图像

我绝望了。我已经尝试了一百万种方法让这张图片在桌面上工作，现在它是了，我注意到它没有显示在ipad上。在我的手机（galaxy s3）上有，但不能拖动！！：（

这是一张世界地图，希望它从欧洲开始，但可以拖动它，这样你就可以看到整个画面

你可能会生病，当你看到这个代码…对不起

HTML

}

剧本

$(document).ready(function(){
var $bg = $('#screen'),
    elbounds = {
        w: parseInt($bg.width()),
        h: parseInt($bg.height())
    },
    bounds = {w: 3609 - elbounds.w, h: 1858 - elbounds.h},
    origin = {x: -1361, y: -315},
    start = {x: -1361, y: -315},
    movecontinue = false;

function move (e){
    var inbounds = {x: false, y: false},
        offset = {
            x: start.x - (origin.x - e.clientX),
            y: start.y - (origin.y - e.clientY)
        };

    inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;
    inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;

    if (movecontinue && inbounds.x && inbounds.y) {
        start.x = offset.x;
        start.y = offset.y;

        $(this).css('background-position', start.x + 'px ' + start.y + 'px');
    }

    origin.x = e.clientX;
    origin.y = e.clientY;

    e.stopPropagation();
    return false;
}

function handle (e){
    movecontinue = false;
    $bg.unbind('mousemove', move);

    if (e.type == 'mousedown') {
        origin.x = e.clientX;
        origin.y = e.clientY;
        movecontinue = true;
        $bg.bind('mousemove', move);
    } else {
        $(document.body).focus();
    }

    e.stopPropagation();
    return false;
}

function reset (){
    start = {x: 0, y: 0};
    $(this).css('backgroundPosition', '0 0');
}

$bg.bind('mousedown mouseup mouseleave', handle);
$bg.bind('dblclick', reset);
});
</script>

$（文档）.ready（函数（）{
变量$bg=$（“#屏幕”），
肘部={
w:parseInt（$bg.width（）），
h:parseInt（$bg.height（））
},
边界={w:3609-elbounds.w，h:1858-elbounds.h}，
原点={x:-1361，y:-315}，
开始={x:-1361，y:-315}，
movecontinue=false；
功能移动（e）{
var inbounds={x:false，y:false}，
偏移量={
x:start.x-（origin.x-e.clientX），
y:start.y-（origin.y-e.clientY）
};
inbounds.x=offset.x<0&（offset.x*-1）

对于这位毫无希望的设计师的任何想法都将不胜感激

非常感谢

---

注：哦，我对脚本一无所知。甚至连jquery和javascript之间的区别都不知道……我是一个自学者，你的图像有多大？出于内存考虑，Mobile Safari对图像的建议限制为1024x1024，当超过这个大小时，我会让它表现得不可预测。我建议尝试对mobi使用更小的图像le/片剂。见：

---

编辑：我刚看到它是3609x2105像素。请尝试较小的版本

尝试使用

$bg.bind（'mousedown mouseup mouseleave touch touch start touch end'，handle）

在代码最后一行的第四行！代码中没有支持触摸设备的事件。这可能是原因。谢谢，我会尝试一下，但是我认为这可能是尺寸问题，dKen在下面指出。我会添加这一行。谢谢！我要尝试一下。图像很大，这可能就是原因。谢谢是那个人。非常感谢。我现在需要找到一个解决方案，解决无法正确看到图标的问题。。。

#screen {
display:block;
float:left;
margin:25px 0 0 0;
width:699px; 
height:358px; 
background-image: url(http://ctsmedia.co.uk/_images/desktop/EMEA_map.png);
background-position: 50% 35%;
background-repeat: no-repeat;

$(document).ready(function(){
var $bg = $('#screen'),
    elbounds = {
        w: parseInt($bg.width()),
        h: parseInt($bg.height())
    },
    bounds = {w: 3609 - elbounds.w, h: 1858 - elbounds.h},
    origin = {x: -1361, y: -315},
    start = {x: -1361, y: -315},
    movecontinue = false;

function move (e){
    var inbounds = {x: false, y: false},
        offset = {
            x: start.x - (origin.x - e.clientX),
            y: start.y - (origin.y - e.clientY)
        };

    inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;
    inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;

    if (movecontinue && inbounds.x && inbounds.y) {
        start.x = offset.x;
        start.y = offset.y;

        $(this).css('background-position', start.x + 'px ' + start.y + 'px');
    }

    origin.x = e.clientX;
    origin.y = e.clientY;

    e.stopPropagation();
    return false;
}

function handle (e){
    movecontinue = false;
    $bg.unbind('mousemove', move);

    if (e.type == 'mousedown') {
        origin.x = e.clientX;
        origin.y = e.clientY;
        movecontinue = true;
        $bg.bind('mousemove', move);
    } else {
        $(document.body).focus();
    }

    e.stopPropagation();
    return false;
}

function reset (){
    start = {x: 0, y: 0};
    $(this).css('backgroundPosition', '0 0');
}

$bg.bind('mousedown mouseup mouseleave', handle);
$bg.bind('dblclick', reset);
});
</script>