javascript - jquery 水平动画在 ipad 和平板电脑上失败

Question

我很难让一些 jquery 与 ipad 或其他平板电脑 zoom 一起玩得很好。应该有一个水平动画。单击左侧和右侧的紫色按钮时，平板电脑上会发生可怕的重新缩放。

我的视口(viewport)设置为 1200。

这是我的jquery。当动画水平拉入内容并淡出时，ipad 会重新缩放片刻，然后自行显示。

<script>
jQuery(document).ready(function($) {

$('.link').click(function() {
    $('#page').css('display','block');
    $('#page').animate({'left':'0px'}, 600);
    //$('#page2').animate({'left':'11400px'}, 600);
    //$('#page3').animate({'right':'-11400px'}, 600);
    $('#page3').hide(100);
    $('#page2').hide(100);
    $('#page2').animate({'left':'1090px'}, 600);
});

$('.link2').click(function() {
    //$('#page').hide(100);

    //$('#page3').css('display','block');
    $('#page3').show();
    $('#page3').animate({'left':'0px'}, 600);

    $('#page').hide(100);
    $('#page2').hide(100);
    $('#page2').animate({'left':'-1090px'}, 600);
    //$('#page2').hide(100);
    //$('#page2').animate({'left':'-1000px'}, 600);
});

$('.link-back').click(function() {
  $('#page').hide(100);    
    $('#page3').hide(100);
    $('#page2').css('display','block');
    $('#page2').animate({'left':'0px'}, 600);
    $('#page').animate({'left':'-1090px'}, 600);    
    $('#page3').animate({'left':'1090px'}, 600);    
});

});
</script>

这是我的 CSS

.wrapper {
    height: 1800px;
    width: 1080px ;
}
.wrapper2 {
    min-height: 1800px;
    width: 1080px ;
}

#page {
    position: absolute;
    left: -1090px; 
    width: 1080px;
    display: none;    
}
#page2 {
    width: 1080px;
    position: absolute;
    left: -15px;   
}
#page3 {
    position: absolute;
    width: 1080px;
    left: 590px; 
    display: none;     
}

Answer 1

解决方法如下:

<meta name="viewport" content="width=1200, initial-scale=1, maximum-scale=1">

需要防止比例变化并需要修复拼写错误。