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);