jQuery Window Width – Browsers and Responsive Design

jQuery Window Width

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.

Viewport

XHTML

<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.

jQuery Window Width

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 windowmaximized to full screen then it only makes sense to get the width of the window size they are using and not the screen.

jQuery Window Width vs. Document Width vs. Screen Width

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