How to Detect Window Size with jQuery

Detecting a user’s window size is one of the most common tasks in modern web development. Whether you’re designing responsive layouts, triggering animations based on viewport dimensions, or debugging screen-related issues, jQuery makes it extremely easy to get the current window width and height.

In this guide, we’ll cover everything you need to know — from basic detection to automatic resize tracking and viewport measurement.

Table of Contents

What Is Window Size?

The window size refers to the visible area of the browser window, measured in pixels. It excludes browser UI (address bar, tabs, etc.) and represents only the active viewport where the website is rendered.

For example:

Window Width: The horizontal pixel size of the browser viewport
Window Height: The vertical pixel size of the browser viewport

This value changes when users resize the browser or rotate their devices.

Why Detect Window Size?

Developers detect window size for many reasons:

Responsive design adjustments
Lazy loading images based on viewport
Showing/hiding mobile menus
Running custom breakpoints
Triggering animations at specific viewport dimensions
Debugging layout problems

Knowing the window size allows you to deliver a better UI regardless of the device.

Detect Window Size with jQuery

Detecting width and height with jQuery is extremely straightforward.

1. Get Window Width and Height

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

console.log("Window Size: " + width + " × " + height);

This retrieves the current visible viewport dimensions.

2. Detect Window Resize Automatically

Want to react when the user resizes the browser?

$(window).on('resize', function () {
    var w = $(this).width();
    var h = $(this).height();
    console.log("Resized → " + w + " × " + h);
});

This is useful for:

Live layout adjustments
Responsive UI transitions
Debugging breakpoints

3. Display Window Size on Your Webpage

If you want to show the size to users:

<div id="win"></div>

function updateSize() {
    $('#win').text($(window).width() + " × " + $(window).height());
}

$(document).ready(updateSize);
$(window).on('resize', updateSize);

Viewport Size vs. Window Size

Although often used interchangeably, they are slightly different:

Window size: jQuery’s $(window).width() → viewport area
Viewport size: includes inner spacing and scrollbars

To get viewport size with jQuery:

var vw = $(window).innerWidth();
var vh = $(window).innerHeight();

To get layout width/height including scrollbars:

var vw2 = document.documentElement.clientWidth;
var vh2 = document.documentElement.clientHeight;

Common Use Cases for jQuery Window Size Detection

Running JS only on mobile devices
Switching between desktop and mobile menus
Animating elements based on viewport thresholds
Changing grid layout on certain breakpoints
Dynamically resizing canvases, charts, maps, or UI components
Debugging responsive CSS issues

Responsive Breakpoints Example

A typical jQuery breakpoint check:

if ($(window).width() < 768) {
    console.log("Mobile view activated");
} else {
    console.log("Desktop view");
}