这确实是与 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
}
}
最佳答案
看来您的媒体查询导致了您遇到的问题。
试试这个:
enquire.register("screen and (max-width:679px)", {
match : function() {
//small screen
}
}).register("screen and (min-width:680px)", {
match : function() {
//large screen
}
}).listen();
关于javascript - 使用 Enquire.js 根据媒体查询切换功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15286661/