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.
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.
To determine the browser window width and if it gets resized we’ll use:
- jquery width
- jquery resize
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.
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.