基於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的媒體查詢開關功能

回答

相關問題