Question

我正在构建一个脚本，当窗口大小低于783px时需要更改某个脚本的整个功能，所以我找到了解决方案

if(jQuery(document).width() < "783" && myvar=="1"){
//do things for screens under 783px
}

但它只有在第一次加载网站时屏幕低于783px时才有效，现在我想检查调整大小，因为css媒体查询工作并且它搞砸了。我需要这样的东西：

if((document).width()<783 && myvar=="1" || onresize(document.width<783) && myvar=="1"){
//do things for screens under 783px
}

任何人都可以帮我这个吗？我已经尝试过用

做了

jQuery(window).on("resize", function () {
//do my things for under 783px
}).resize();

但它似乎没有用，如果有人有其他建议请分享。

Answer 1

使用：

function check() {
    if ($(document).width() < 783 && myVar === "1") { // use `===` and no quote around 783
        console.log("y");
    }
}

check(); // first-time check

$(window).resize(function () {  // no `on` here
    check();
}); // no `.resize()` needed here

DEMO

注意：将此内容整合到$(window).load()

中

Answer 2

这样做

$(document).ready({
    //check windows width when window load
    if( $(windows).width() < 783 && ....){
        //do your stuff here
    }

    //when window is resized
    $(window).on('resize', function(){

        if($(window).width() < 783 && ....){
            //do your stuff here 
        }
    });
});

Answer 3

将调整大小侦听器附加到窗口会导致IE出现问题（特别是在旧版本中）。根据我的经验，最好将它们附在您的文件或正文中。

$(function()
    var document = $(document);
    document.resize(function() {
        if (document.width() < 783 && myvar === "1") {
            // your stuff here
        }
    });
);

在加载时检查窗口大小，并根据条件调整大小

3 个答案:

DEMO