如果屏幕宽度小于960像素，则执行某些操作。

Question

如何在屏幕宽度小于960像素时让jQuery执行某些操作？ 下面的代码总是触发第二个警报，而不考虑我的窗口大小：

if (screen.width < 960) {
    alert('Less than 960');
}
else {

    alert('More than 960');
}

- Evanss

---

你是在页面加载时还是调整浏览器大小时执行这个操作？最好使用alert(screen.width)来查看决定使用了什么。 - Farrukh Subhani

为什么不使用媒体查询？ - bzlm

为什么不使用媒体查询？我可以想到很多情况，媒体查询完全没有帮助。如果 jdln 想要使用 jQuery，让我们假设他有充分的理由这样做。 - Luke

有很多情况下媒体查询无法发挥作用，例如仅在屏幕宽度大于1000像素时激活砌体效果。 - Pekka

Answer 1

使用jQuery获取窗口的宽度。

if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}

- aziz punjani

---

请注意，如果滚动条可见，$(window).width()在不同浏览器中可能不一致。我发现使用JavaScript媒体查询要更加可靠，具体方法可以参考链接：https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238。 - forsvunnet

@forsvunnet 那个链接已经失效了。 - Shah Abaz Khan

JavaScript媒体查询链接：https://www.w3schools.com/howto/howto_js_media_queries.asp - Timar Ivo Batis

Answer 2

你可能想将它与调整大小事件结合使用：

 $(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 标志。

- jk.

---

将代码包裹在resize事件中只会在调整大小时触发，而不会在加载时触发。 - Ted

这就是为什么我说“将其与...结合起来”。 - jk.

嘿，你介意解释一下我该如何组合这个调整大小事件吗？我有一个函数，只想在浏览器宽度大于960像素时加载，无论是在初始页面加载时还是在调整大小之前/之后。如果我在第一次检测窗口宽度后添加此片段，如果用户从大于960像素的浏览器宽度开始，然后调整大小，函数将已经加载。如果浏览器调整为小于960像素的宽度，是否可能清除已经触发的函数？ - R.J.

@R.J. 请查看上面的编辑。我不知道你所说的“清除”事件是什么意思，因此我选择防止事件再次触发。 - jk.

太棒了，我已经试了好几天如何在调整大小时绑定“equalHeights”函数，但仅适用于宽度大于768的情况。这个方法非常有效。谢谢。 - Danny Englander

在这段代码之后添加一个调整大小事件是有意义的，这样在加载时无论浏览器的当前大小是什么，它都将运行所需的代码。 - BennKingy

Answer 3

我建议不要使用jQuery来完成这件事，而是使用window.innerWidth：

if (window.innerWidth < 960) {
    doSomething();
}

- Daniel Kmak

---

为什么最好不要使用jQuery？ - ejntaylor

@raison 我发现 $(window).width() 不包括滚动条 - 所以如果你的屏幕是960px，它会返回944px，导致你的js无法按照预期工作。这个解决方案将返回960px。 - Sean T

如果不必要，为什么要使用 jQuery？它会带来额外的问题... - 71GA

这可能是这里最好的解决方案。 - upss1988

这应该是答案，因为滚动条没有包含在内，因此它与CSS中的媒体查询结合使用。 - DocRattie

Answer 4

您也可以使用JavaScript的媒体查询。

const mq = window.matchMedia( "(min-width: 960px)" );

if (mq.matches) {
       alert("window width >= 960px");
} else {
     alert("window width < 960px");
}

- user7923788

---

这是一个很好的方法，可以通过断点来定位功能。谢谢！ - undefined

Answer 5

// Adds and removes body class depending on screen width.
function screenClass() {
    if($(window).innerWidth() > 960) {
        $('body').addClass('big-screen').removeClass('small-screen');
    } else {
        $('body').addClass('small-screen').removeClass('big-screen');
    }
}

// Fire.
screenClass();

// And recheck when window gets resized.
$(window).bind('resize',function(){
    screenClass();
});

- leymannx

Answer 6

我建议使用jQuery：

/*
 * windowSize
 * call this function to get windowSize any time
 */
function windowSize() {
  windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
  windowWidth = window.innerWidth ? window.innerWidth : $(window).width();

}

//Init Function of init it wherever you like...
windowSize();

// For example, get window size on window resize
$(window).resize(function() {
  windowSize();
  console.log('width is :', windowWidth, 'Height is :', windowHeight);
  if (windowWidth < 768) {
    console.log('width is under 768px !');
  }
});

在CodePen中添加： http://codepen.io/moabi/pen/QNRqpY?editors=0011

接着，你可以通过var：windowWidth轻松获取窗口宽度， 并使用：windowHeight获取高度

否则，获取一个JavaScript库： http://wicky.nillia.ms/enquire.js/

- moabi

Answer 7

我知道我的回答有些晚了，但我希望对于任何遇到类似问题的人都有所帮助。这个方法也适用于页面因任何原因而刷新的情况。

$(document).ready(function(){

if ($(window).width() < 960 && $(window).load()) {
        $("#up").hide();
    }

    if($(window).load()){
        if ($(window).width() < 960) {
        $("#up").hide();
        }
    }

$(window).resize(function() {
    if ($(window).width() < 960 && $(window).load()) {
        $("#up").hide();
    }
    else{
        $("#up").show();
    }

    if($(window).load()){
        if ($(window).width() < 960) {
        $("#up").hide();
        }
    }
    else{
        $("#up").show();
    }

});});

- Veljko Stefanovic

Answer 8

使用

$(window).width()

或者

$(document).width()

或者

$('body').width()

- Guard

Answer 9

我使用原生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(); }
});

最佳实践是将这两个代码片段结合在项目中。

- M NARESH

Answer 10

尝试这段代码。

if ($(window).width() < 960) {
 alert('width is less than 960px');
}
else {
 alert('More than 960');
}

   if ($(window).width() < 960) {
     alert('width is less than 960px');
    }
    else {
     alert('More than 960');
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

- JIBIN BJ