jquery - jQuery - 根据屏幕大小执行脚本

Question

如果屏幕/设备大小超过 xxx 像素宽，是否可以只运行某些 jQuery 脚本？

因此，例如，当人们在大于 1024 像素的设备上查看网站时，我只想运行幻灯片。如果有人在手机上访问，我只想将所有图像堆叠显示...

Answer 1

您可以使用$(window).width()

if($(window).width() >= 1024){
  // do your stuff
}

演示---> http://jsfiddle.net/fh2eC/1/

Answer 2

如果要在调整窗口大小后检查宽度大小，则：

$(window).resize(function() {
    if( $(this).width() > width ) {
        // code
    }
});

Answer 3

你也可以考虑像https://github.com/paulirish/matchMedia.js/这样的库

if (matchMedia('only screen and (max-width: 480px)').matches) {
  // smartphone/iphone... maybe run some small-screen related dom scripting?
}

Answer 4

只需使用以下内容：

if($(window).width() >= 1024){
    //your code here
}

这可行，但请记住将脚本放在页面的末尾而不是开头，否则您最终会得到不同的结果。如果您打算使用它来应用任何类型的样式，我也会避免在 document.ready() 事件中使用它，因为在应用所述样式时可能会有轻微但明显的延迟。