1

这实际上与此问题相同，但我希望有人可以更彻底地回答。

我正在尝试使用两个不同的 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();

});

完整的.js

function full() {

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

}

移动.js

function mobile() {

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

}
4

1 回答 1

0

看起来您的媒体查询是导致您遇到问题的原因。

试试这个：

enquire.register("screen and (max-width:679px)", {
    match : function() {
        //small screen
    }
}).register("screen and (min-width:680px)", {
    match : function() {
        //large screen
    }
}).listen();
于 2013-04-06T10:16:24.943 回答