基于Enquire.js的媒体查询开关功能

这与this的问题确实是同一个问题，但我希望有人能够更彻底地回答它。基于Enquire.js的媒体查询开关功能

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

}

来源

2013-03-08 maskedjellybean

嗨，老兄，如果你创建了一个小提琴，我会看看您的问题 – WickyNilliams 2013-03-09 15:11:14

它看起来像你的媒体queri这些问题会导致您遇到的问题。

试试这个：

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

来源

2013-04-06 10:16:24

基于Enquire.js的媒体查询开关功能

回答

相关问题