jQuery为不同大小的设备制作动画？

Question

我确实有以下JQuery代码：

$("#keypad-toggle").click(function(e) {
    e.preventDefault();
    if ($("#numbers").hasClass("toggled")) {
        $("#numbers").animate({
            "height": "68%"
        }, function() {
            $("#innernumpad").hide();
        }).removeClass("toggled");
    } else {
        $("#numbers").animate({
            "height": "51%"
        }).addClass("toggled");
        $("#innernumpad").show();
    }
});

它的功能是将键盘从屏幕底部滑动到顶部。我已将其设置为滑动到div高度的51％，因此div的原始高度将为68％。这个高度在桌面屏幕上看起来很完美。我在不同的设备高度上尝试了这个值，div的高度将无法正常显示。那么，我们如何设置不同设备的滑动高度？通过使用媒体查询？我们如何转换这部分代码以便它可以支持不同的设备？

jsfiddle看起来像这样：

JSFIDDLE