jQuery媒体查询适用于调整大小和加载?

时间:2013-09-20 00:00:58

标签: jquery responsive-design media-queries

我有一个响应式网站,我只是在屏幕处于或低于480px宽时尝试运行某些jQuery功能。我只能让它部分工作。如果您使用浏览器加载页面&lt; 480px宽,它的工作原理。但是如果你加载页面&gt; 480px宽,然后将其调整为<480,它不起作用。我需要它在两种情况下工作,在你相应调整大小时关闭和打开。我究竟做错了什么?只有当您在&lt; = 480。

加载页面时,我才能使用此功能
jQuery(document).ready(function($){
    if ( $("div#wrapper").css("overflow") === "visible") {      
    // mobile js goes here
}
});

我也尝试过这种方式,但是一旦我调整大小,就会开始循环播放“移动js到这里”部分的所有内容并崩溃浏览器???

$(window).resize(function(){    
    if ( $("div#wrapper").css("overflow") === "visible") {
        // mobile js goes here
    }
});

*更新* 好的,基于下面的两个答案,我试着将这两个答案混合起来。我明白要实现我想要的,我必须删除我添加到&lt; 480的所有代码,如果它是&gt; 480。但由于我有大约10个函数,所以单独删除每个函数似乎效率很低。所以相反,我尝试使用窗口).resize来简单地添加和删除一个“移动”类到body标签。然后使用一个条件,“如果身体有一类移动,做这个....”我将包括我的10个功能。但是,这只是部分有效。添加/删除类有效。但其余部分只有在您首次加载页面<480时才有效。这是我到目前为止的一个小提琴。有没有办法使这项工作?

http://jsfiddle.net/UAkHz/59/

1 个答案:

答案 0 :(得分:0)

将代码添加为调整大小处理程序,然后在dom ready上触发resize事件。

jQuery(function ($) {
    var resizeflag = false;
    $(window).resize(function () {
        if ($("#wrapper").css("overflow") === "visible") {
            if(resizeflag == false){
                resizeflag = true;
                $("#wrapper").append('<div class="test">test</div>')
            }
        } else {
            if(resizeflag == true){
                resizeflag = false;
                $("#wrapper .test").remove();
            }
        }
    }).resize();
});

演示:Problem&amp; Solution