这实际上与此问题相同,但我希望有人可以更彻底地回答。
我正在尝试使用两个不同的 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
}
}