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();

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

1 个答案: