Running different JavaScript at different screen resolutions

Question

I want some jQuery functions for a dropdown menu to run only if the the screen size is under 768px and a different dropdown menu function to run if it is above that value. How would I do this in JavaScript?

possible duplicate of How to detect the screen resolution with JavaScript? — Quentin
– Quentin, Commented Nov 3, 2011 at 14:47

Marijn van Vliet · Accepted Answer · 2011-11-03 14:49:53Z

8

You can get the size of the window (screen size is mostly irrelevant, you care about the actual space you have for rendering) using the .height() and .width() methods:

if( $(window).width() > 768 ) {
    // Large menu
} else {
    // Small menu
}

answered Nov 3, 2011 at 14:49

Marijn van Vliet

5,4092 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Brainer Over a year ago

Just for reference, a non-jQuery solution pulled from the adapt.js code: var width = this.innerWidth || this.document.documentElement.clientWidth || this.document.body.clientWidth || 0;

firefusion Over a year ago

That works! One last question is how to I get this to update on resize?

firefusion Over a year ago

Don't worry found the resize event :P Silly me.

Todd Vance · Accepted Answer · 2011-11-03 14:50:31Z

1

In your ready function, you could test screen height and width like this :

if (screen.width<=768) 
{
//Do this
}
else

answered Nov 3, 2011 at 14:50

Todd Vance

4,7417 gold badges50 silver badges67 bronze badges

Collectives™ on Stack Overflow

Running different JavaScript at different screen resolutions

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related