How to get screen resolution with JavaScript/jQuery?

Detecting screen resolution in JavaScript is one of those tasks that seem simple… until you realize that three distinct types of sizes exist: the actual device screen, the browser window, and the famous viewport. When I started working with overlays and dynamic layouts, I discovered that using the wrong property could break the entire interface. So in this guide, I'm going to tell you step-by-step what I wish I had read right from the start.

JavaScript offers several tools to calculate the width and height of the screen—that is, the resolution of the device. Most of this processing is carried out through the screen object and the window object, each with its own properties and use cases.

The reasons for wanting to obtain screen resolution are varied: controlling content layout, displaying information to the user, building a full-screen overlay, or simply applying responsive design logic directly from JavaScript. In this post, we will see how to do it with native JavaScript and, as a bonus, also with jQuery.

What "resolution" means in JavaScript: screen, browser, and viewport

Before writing a single line of code, you need to be clear about what exactly you are measuring, because JavaScript does not give a single answer. And yes, it happened to me too: mixing up sizes and wondering why my calculations didn't add up.

In JavaScript, there are three "levels" of size that are worth distinguishing:

Actual screen (screen): the total pixel size of the physical device, regardless of what the user has open.
Browser window (window): the space occupied by the browser window, including its frames and internal bars.
Viewport (innerWidth / innerHeight): the visible area where your website is rendered, excluding toolbars or browser frames.

If you know how to tell them apart, you will avoid 90% of errors when working with resolutions in JavaScript.

Comparison table: `screen`, `window`, and viewport

Type	Properties	What it measures	When to use
Screen	`screen.width` / `screen.height`	Total physical size of the device	Analytics, displaying info to the user
Browser	`outerWidth` / `outerHeight`	Size of the browser window	Detecting browser resize
Viewport	`innerWidth` / `innerHeight`	Actual visible area of your page	Responsive layout, overlays, dynamic UI

How to get screen width and height with JavaScript (`screen.width` and `screen.height`)

As we can see in the following figure, the screen object is composed of several methods and attributes. However, to get the screen resolution, the ones that interest us the most are screen.width and screen.height.

With the following two lines of code you get the full device resolution:

screen.width;
screen.height;

In this way, you can get the screen resolution in pixels—composed of screen.width (width) and screen.height (height)—for devices such as monitors, phones, tablets, among many others. It is important to clarify that these values are fixed: they represent the physical size of the device and do not change when resizing the browser window.

Available space: `screen.availWidth` and `screen.availHeight`

In addition to obtaining the total resolution, the screen object provides two additional, very useful properties: screen.availWidth and screen.availHeight. These exclude the space occupied by the operating system (such as the Windows taskbar or the macOS Dock), returning the actual space available to display the web browser.

screen.availWidth;
screen.availHeight;

They are useful when you need to know exactly how much space the user has available on their desktop, not just the raw size of their screen.

Complete example: obtaining screen resolution with JavaScript

document.getElementById("widthYheight").innerHTML =
    "My screen resolution is: " + screen.width + " px by " + screen.height + " px";

document.getElementById("availwidthYavailheight").innerHTML =
    "The available width and height for the browser is: " + screen.availWidth + " px by " + screen.availHeight + " px";

How to detect window resize with JavaScript (`onresize`)

Now having a clear understanding of how to get the physical screen resolution through the screen object, another very common scenario is knowing when the user resizes the browser window and what its size is at that moment. For that, the JavaScript API exposes the onresize event:

<body onresize="funcionResize()">

This event fires every time the browser window is resized. To know how much space in pixels the window is occupying at that moment, we use the outerWidth and outerHeight properties of the window object:

function funcionResize() {
    var widthBrowser = window.outerWidth;
    var heightBrowser = window.outerHeight;
    console.log("Browser window size: width=" + widthBrowser + ", height=" + heightBrowser);
}

Alternatively, you can also listen for the event with addEventListener, which is the most modern and recommended way in modern JavaScript:

window.addEventListener("resize", function () {
    console.log("Width:", window.outerWidth, "Height:", window.outerHeight);
});

How to check available browser space (`screen.availWidth` and `screen.availHeight`)

These properties are very useful if you need to know the screen space not occupied by operating system elements. Many developers don't use them, but they can make a noticeable difference in desktop interfaces or web applications seeking native behavior.

console.log(screen.availWidth, screen.availHeight);

With this, you get the "usable" space to display a browser, without counting the taskbar, docks, system side panels, etc.

Actual viewport size: `innerWidth`, `innerHeight`, and `outerWidth`

This is where the truly useful stuff for modern web development begins. The viewport is the area where your page content lives and renders. Unlike outerWidth, which includes browser frames, innerWidth and innerHeight return exclusively the visible area available for your web page.

window.innerWidth / window.innerHeight: actual dimensions of the visible area (viewport). They change when resizing the window.
window.outerWidth / window.outerHeight: the entire browser window, including frames and toolbars.

console.log("Viewport width:", window.innerWidth);
console.log("Viewport height:", window.innerHeight);

These are the properties used in 90% of practical cases. If you are designing something responsive or calculating positions for overlays and modals, innerWidth and innerHeight are your starting point.

How to detect screen resize with jQuery

jQuery is still very present in legacy projects and many CMSs. If the site you are developing already uses it, detecting window resizing is just as easy thanks to the $(window).resize() method:

$(window).resize(function () {
    var widthBrowser = $(window).width();
    var heightBrowser = $(window).height();
    console.log("Browser size: width=" + widthBrowser + " height=" + heightBrowser);
});

Keep in mind that jQuery's $(window).width() is equivalent to window.innerWidth in native JavaScript, so both return the viewport size, not the full physical screen size.

Differences when detecting resolution on mobile vs. desktop

On mobile, the behavior of these properties has its peculiarities, and it is worth considering them to avoid surprises:

screen.height on mobile always returns the full physical size of the screen, regardless of orientation or visible content.
window.innerHeight fluctuates constantly: the virtual keyboard, the browser navigation bar when scrolling, or an orientation change can modify its value in real time. Avoid using it for calculations that need to be stable.
To detect orientation changes on mobile, listening for the screen.orientation.addEventListener("change", ...) event is more reliable than the classic resize.

When working on a mobile project, I discovered that the virtual keyboard reduced innerHeight drastically. It took me a while to understand why the layout "jumped" when focusing on a text field. Since then, for fixed positioning on mobile, I prefer to anchor calculations to screen.height or use CSS units like dvh (dynamic viewport height).

Can DPI or screen inches be detected with JavaScript?

This is a question that pops up fairly frequently. The short answer is: indirectly and with limitations. JavaScript exposes the window.devicePixelRatio property, which indicates the ratio between physical pixels and CSS pixels on the device. On an Apple Retina display, for example, this value is usually 2.

console.log("Device Pixel Ratio:", window.devicePixelRatio);

Combining window.devicePixelRatio with screen.width allows you to estimate actual physical pixels, but reliably calculating exact inches is not possible from the browser, as JavaScript does not have access to the physical panel size.

Frequently asked questions

Which property should I use for responsive design?
- Always window.innerWidth / window.innerHeight. They reflect the actual space available for your content and change in real time when resizing the window.
Can I detect DPI with JavaScript?
- Yes, approximately using window.devicePixelRatio, but it is not possible to obtain the exact physical monitor DPI from the browser due to privacy and hardware access reasons.
How do I detect resolution in real time?
- By listening for the resize event with window.addEventListener("resize", ...). If you want to optimize performance, apply a debounce pattern to prevent the callback from firing hundreds of times per second while the user drags the window border.
What is the difference between screen.width and window.innerWidth?
- screen.width is the total physical width of the device and never changes. window.innerWidth is the width of the viewport, which varies as the browser is resized. For dynamic web design, you almost always need window.innerWidth.

✅ Conclusion

Detecting screen resolution in JavaScript isn't as simple as querying screen.width: the key lies in knowing exactly what size you need in each situation. After making several mistakes using the wrong properties, I understood that differentiating between screen (screen), browser window (outerWidth), and viewport (innerWidth) changes everything.

If you apply this approach thoughtfully, your layouts will stop breaking, your overlays will work exactly as expected, and your code will be much more predictable on any device.