用Enquire.js实现基于媒体查询的切换功能

Question

这和这的问题是一样的，但我希望有人能更彻底地回答这个问题。

我正在尝试使用两个不同的js函数创建一个“移动”和一个“完整”版本的站点。我理解响应性设计，并且我正在通过CSS进行大部分更改，但是这两个版本需要有两个相互排斥的js功能。Enquire.js允许使用媒体查询，如果不调整浏览器窗口的大小，它们会很好地工作。但是，如果您将窗口的大小从"full“调整为"mobile"，那么在我的示例中，函数full()不会停止运行，尽管我在下面尽了最大的努力(可能不是很好)。但是，警报总是正确的："true“表示full()，"false”表示mobile()，函数似乎忽略if语句。如果有更好的选择，我可以不用询问。

js-decder.js

$(function() {

window['fullEnabled'];
window['mobileEnabled'];

enquire.register("screen and (min-width:680px)", {

match : function() {

 window['fullEnabled'] = true;
 window['mobileEnabled'] = false;
 full();

}

}).register("screen and (max-width:679px)", {

match : function() {

 window['fullEnabled'] = false;
 window['mobileEnabled'] = true;
 mobile();

}

}).listen();

});

full.js

function full() {

    if (window['fullEnabled']==true) {
        alert(window['fullEnabled']);
        // do other stuff
    }

}

mobile.js

function mobile() {

    if (window['mobileEnabled']==true) {
        alert(window['fullEnabled']);
        // do other stuff
    }

}

Answer 1

看起来您的媒体查询是引起您交叉的问题的原因。

试一试：

enquire.register("screen and (max-width:679px)", {
    match : function() {
        //small screen
    }
}).register("screen and (min-width:680px)", {
    match : function() {
        //large screen
    }
}).listen();