jQuery Window Width – Determine Browser Window Size, Responsive Design

jquery window width, you’ll need it if you’re working with Responsive Design and/or need to figure out the width of the browser Window? Are you using a responsive design layout and using viewport, but need a way to determine window width? jQuery width() and jQuery resize() can help.

Responsive Design

With so many devices able to access the internet, Responsive Design is becoming a necessity.   Smart phones, tablets, laptops, and desktop computers have different viewable areas. Viewport is the window size of the device. We’ll use jquery width and resize functions to determine the window width of the screen thus aiding us in our Responsive Design.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

To determine the browser window width and if it gets resized we’ll use:

• jquery width
• jquery resize
• window

jQuery Window Width Determined

jQuery .width() returns a numerical value only, i.e.325.  The value is in pixels.  However, .css(width) will return the number and units, i.e. 325px.   We want to use jQuery window width since we’ll test for numerical values later.

var wi = $(window).width(); // Stores the numerical value of the width into the variable "wi"

Window vs. Document vs. Screen

Why window width?  The window “holds” the document. Because the document is what gets loaded into the Window object we’ll use $(window).width().  I also use  jquery window width instead of screen width.  If someone doesn’t have their browser window maximized to full screen then it only makes sense to get the width of the window size they are using and not the screen.

$(window).width();   // This will return the width of browser viewport
$(document).width(); // This will return the width of HTML document
$(screen).width(); // This will return the width of the users screen
 
//Since the document is what gets loaded into the Window object, and the 
//browser window may not be maximized to full screen we'll use $(window).width();

jQuery Window Resize

What happens if the window is resized?  Luckily jQuery has a function to test if an object gets resized.  The code below will show the window width when resized.

$(window).resize(function() {
        var wi = $(window).width();
        $("p.testp").text('Screen width is currently: ' + wi + 'px.');
});

jQuery Window Width

The code below will use jQuery window width to show the initial screen width, but not once it’s resized.

$(window).resize(function() {
        var wi = $(window).width();
        $("p.testp").text('Screen width is currently: ' + wi + 'px.');
});

jQuery Window Width

The code below will use jQuery window width to show the initial screen width, but not once it’s resized.

var wi = $(window).width();  
$("p.testp").text('Initial screen width is currently: ' + wi + 'px.');

jQuery Window Width Determined Initially and When Resized

We’ll put it all together here.  We’ll use jQuery window width and resize as we did above.  I will provide the HTML to be manipulated further below.

/*
* How to detect browser width
*/
$(window).ready(function() {
    var wi = $(window).width();  
    $("p.testp").text('Initial screen width is currently: ' + wi + 'px.');
 
    $(window).resize(function() {
        var wi = $(window).width();
 
        if (wi <= 480){
            $("p.testp").text('Screen width is less than or equal to 480px. Width is currently: ' + wi + 'px.');
            }
        else if (wi <= 767){
            $("p.testp").text('Screen width is between 481px and 767px. Width is currently: ' + wi + 'px.');
            }
        else if (wi <= 980){
            $("p.testp").text('Screen width is between 768px and 980px. Width is currently: ' + wi + 'px.');
            }
        else if (wi <= 1200){
            $("p.testp").text('Screen width is between 981px and 1199px. Width is currently: ' + wi + 'px.');
            }
        else {
            $("p.testp").text('Screen width is greater than 1200px. Width is currently: ' + wi + 'px.');
            }
    });            
});

jQuery Window Width HTML

Below is the HTML required. We use the jQuery / javascript code above to manipulate the HTML code below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Detect Browser Window Width</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="jquery.js"></script>
    <!-- Note - You must place your Javascript in an external file for this to work correctly -->
    <script type="text/javascript" src="detect.js"></script>
</head>
<body>
    <p class="testp"></p>
</body>
</html>