How to detect the width of a web browser using jQuery

Detecting the width of a browser window can be very useful when designing a website, it allows you to create a more responsive design which is suited to the current browser dimensions.

Using the small chunk of jQuery below, you can easily detect the current width of a web browser & perform various actions when the width reaches a particular range of values. When redeveloping my site I opted to use this method to add a different body class to the site when the browser width reaches a below particular points: 'smaller' when the width reaches below 960px but greater than 400px and 'smallest' when the width is below '400px'. The additional body classes then allowed me to alter the position/style of particular elements on the page.

(function($){

//detect the width on page load

$(document).ready(function(){

var current_width = $(window).width();

 //do something with the width value here!

if(current_width < 400){

  jQuery('body').addClass('probably-mobile');

}

});

//update the width value when the browser is resized (useful for devices which switch from portrait to landscape)

$(window).resize(function(){

var current_width = $(window).width();

//do something with the width value here!

if(current_width < 400){

  jQuery('body').addClass('probably-mobile');

}

});

})(jQuery);

As well as implementing this technique on my site, I also created the page: what is my browser width? as a demo.

Using the code above can be really useful when adapting your website to fit a mobile browser however it's not a perfect solution - shrinking images down to a width of 320px can often render them useless, especially with intricate diagrams. I'm really interested in exploring the concept of feeding the width information to a server side script via AJAX, this could then be used to optimize the next page load for the current user, remove large images or anything that may take longer to load over a mobile network.

I'm still learning about responsive web design & the example above is just one possible method of implementing it, CSS3 media queries is another possible method I'm looking to explore.

Used the code above? Let me know in the comments!

Filed under:

Rewilding the planet with animation and motion design

We've only got one planet, and right now it needs all the help it can get. Climate change and biodiversity loss are massive challenges that we need to tackle head on.

That's why, for every animation project over £1000 a donation of 2% of the total budget will be made to the World Land Trust, on your behalf.

The money will go towards WLT's "buy an acre" programme; buying up and protecting vital habitats around the world, and helping fight against climate change.

Any projects under £1000 will have a tree planted on your behalf.

Acres saved so far:

Thanks to my wonderful clients and the animations we've produced, enough money has been donated to save around 12 Acres of vital habitats around the world.