jQuery - Execute scripts based on screen size

Question

Is it possible to only run certain jQuery scripts if the screen/device size is above xxx pixels wide?

So, for example, I only want to run a slideshow when people are viewing the site on devices bigger than 1024px. If someone visits on a mobile I just want all the images to display stacked on top of each other...

Answer 1

You can use $(window).width()

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

Demo ---> http://jsfiddle.net/fh2eC/1/

Answer 2

If you want to check width size after windows is resized then:

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

Answer 3

You might also consider a library like 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

Just use the following:

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

This works, but remember to put the script at the end of your page rather than at the beginning, otherwise you'll end up having mixed results. I'd also avoid using it inside a document.ready() event if you're planning to use it to apply styles of any sort as there might be a slight but noticeable delay in applying said styles.