如果我的屏幕宽度小于960像素，我如何让jQuery做一些事情?下面的代码总是触发第二个警报，不管我的窗口大小:
if (screen.width < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
当前回答
我对使用香草JS的问题的解决方案是，
window.addEventListener("load", function () {
if (window.innerWidth < 960) { doSomething(); }
}
这是可行的，但有一个问题，每当在开发工具中调整屏幕大小时(这对开发人员来说是一件常见的事情)，函数所做的事情将不会被触发。
例如，如果我们在屏幕大小超过1000px的计算机上显示网页，函数将不会被触发，当我们将窗口大小调整到小于目标(这里是960px)时，我们期望事件被触发，但这并没有发生。
当脚本文件已经被处理和完成并且不会被重新读取时，所以我们需要在调整屏幕大小时触发一个事件，并使用“addEventListener”处理该事件，就像这样;
window.addEventListener("resize", (e) => {
const windowWidth = window.innerWidth;
if (windowWidth > 960) { doSomething(); }
if (windowWidth < 960) { doSomething(); }
});
最好的做法是在项目中结合这两个代码片段。
其他回答
使用jQuery获取窗口的宽度。
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
我对使用香草JS的问题的解决方案是，
window.addEventListener("load", function () {
if (window.innerWidth < 960) { doSomething(); }
}
这是可行的，但有一个问题，每当在开发工具中调整屏幕大小时(这对开发人员来说是一件常见的事情)，函数所做的事情将不会被触发。
例如，如果我们在屏幕大小超过1000px的计算机上显示网页，函数将不会被触发，当我们将窗口大小调整到小于目标(这里是960px)时，我们期望事件被触发，但这并没有发生。
当脚本文件已经被处理和完成并且不会被重新读取时，所以我们需要在调整屏幕大小时触发一个事件，并使用“addEventListener”处理该事件，就像这样;
window.addEventListener("resize", (e) => {
const windowWidth = window.innerWidth;
if (windowWidth > 960) { doSomething(); }
if (windowWidth < 960) { doSomething(); }
});
最好的做法是在项目中结合这两个代码片段。
你可能想把它和一个resize事件结合起来:
$(window).resize(function() {
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
});
R.J。:
var eventFired = 0;
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
eventFired = 1;
}
$(window).on('resize', function() {
if (!eventFired) {
if ($(window).width() < 960) {
alert('Less than 960 resize');
} else {
alert('More than 960 resize');
}
}
});
我尝试http://api.jquery.com/off/没有成功，所以我使用eventFired标志。
你也可以用javascript来使用媒体查询。
const mq = window.matchMedia( "(min-width: 960px)" );
if (mq.matches) {
alert("window width >= 960px");
} else {
alert("window width < 960px");
}
我建议不要使用jQuery来做这样的事情，而是继续使用window.innerWidth:
if (window.innerWidth < 960) {
doSomething();
}
