javascript - 使用 Enquire.js 根据媒体查询切换功能

Question

这确实是与 this 相同的问题但我希望有人能更彻底地回答这个问题。

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

js-decider.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();