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

Question

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

因此，例如，当人们在大于1024px的设备上查看网站时，我只想播放幻灯片。如果有人在手机上访问我只想让所有图像叠加在一起......

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（）事件中使用它，因为应用所述样式可能会略有但明显的延迟。

Answer 5

你可以使用一个函数然后设置一个间隔来检查每10毫米的大小....... 这里....

function change(){
document.getElementById("p").innerHTML = window.innerWidth;
}

setInterval(change, 10);