How to Get Screen Size in Pixels Using JavaScript

As a web developer, it‘s often useful to know the size of the screen your web application is running on. The screen size can impact the layout, usability, and performance of your site. Luckily, JavaScript provides several built-in properties that allow you to easily get the dimensions of the user‘s screen in pixels.

In this guide, we‘ll take an in-depth look at how to measure the screen size using JS and discuss some potential use cases for this functionality. Whether you‘re implementing responsive design, tracking analytics, or optimizing accessibility, understanding how to dynamically get the screen dimensions is a valuable skill for any front-end dev.

Screen Size Metrics

Before we dive into the code, let‘s clarify some terminology around the different ways to measure screen size:

Screen resolution refers to the number of pixels in the entire screen, including any operating system taskbars or sidebars outside the browser window. This is the full size of the user‘s display monitor.

The browser window size is the dimensions of the entire browser, including the window chrome, toolbars, etc. This is essentially the resolution of the screen minus any OS taskbars.

The viewport size is the actual visible area of the web page inside the browser window, not including any browser UI. This is the size most relevant to responsive design, as it represents the usable space you have for your page content.

Finally, the document size is the dimensions of the rendered HTML document – the total height and width of all the page content. This can be taller or wider than the viewport if the content overflows and the page becomes scrollable.

Here is a visual representation of these different metrics:

[Visual diagram showing screen resolution vs browser window vs viewport vs document]

Now that we understand the different ways to think about screen size, let‘s look at how to measure each one using JavaScript.

Getting the Screen Resolution

To get the full resolution of the user‘s screen, you can use the screen.width and screen.height properties:

const screenWidth = screen.width;
const screenHeight = screen.height;

console.log(`Screen resolution: ${screenWidth}x${screenHeight}px`);

These properties return the width and height of the entire screen in pixels. For example, a laptop with a 13" display might have a screen resolution of 1920x1080px.

It‘s important to note that the screen resolution doesn‘t necessarily represent the usable space for your web page, as it includes areas outside the browser like the OS taskbar and sidebars. Still, knowing the total resolution can be useful for things like analytics or determining the device type (more on that later).

Measuring the Browser Window Size

If you want to know the dimensions of the entire browser window, including the toolbars and chrome, you can use screen.availWidth and screen.availHeight:

const windowWidth = screen.availWidth;
const windowHeight = screen.availHeight;

console.log(`Browser window size: ${windowWidth}x${windowHeight}px`);

These properties give you the width and height of the screen minus any OS taskbars or sidebars. Essentially, it‘s the resolution of the usable space on the screen where the browser window can be drawn.

One interesting thing you can do with screen.availHeight is calculate the height of the user‘s OS taskbar by subtracting it from the total screen height:

const taskbarHeight = screen.height - screen.availHeight;

console.log(`OS taskbar height: ${taskbarHeight}px`); 

Knowing the browser window dimensions can be handy for things like determining if the user has a widescreen monitor or deciding whether to show certain UI elements that might not fit on smaller screens.

Detecting the Viewport Size

In most cases, the size you really care about is the viewport – the visible area of the web page that the user can currently see in their browser. You can get the viewport dimensions using window.innerWidth and window.innerHeight:

const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

console.log(`Viewport size: ${viewportWidth}x${viewportHeight}px`);

These properties give you the width and height of the part of the page that‘s currently visible, not including any browser chrome or scrollbars. This is the space you have available to lay out your content.

One important thing to note about the viewport size is that it can change. If the user resizes their browser window or rotates their device, window.innerWidth and window.innerHeight will update accordingly. You can attach an event listener to detect these changes:

function handleViewportResize() {
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  console.log(`Viewport size changed to: ${viewportWidth}x${viewportHeight}px`);
}

window.addEventListener(‘resize‘, handleViewportResize);

Now any time the viewport size changes, your handleViewportResize function will be called with the updated dimensions. This can be useful for re-laying out content or loading different assets based on the available space.

Calculating the Document Size

Finally, you may want to know the total size of your web page, including any content that extends beyond the current viewport. You can get the document dimensions using document.body.offsetWidth and document.body.offsetHeight:

const pageWidth = document.body.offsetWidth;
const pageHeight = document.body.offsetHeight;

console.log(`Page content size: ${pageWidth}x${pageHeight}px`);

These properties give you the width and height of the entire HTML document, even if some of the content is currently offscreen. If your page has vertically or horizontally scrolling content, the document size will be larger than the viewport size.

One thing to watch out for is that the document size can be affected by CSS styles like padding and margins on the element. To get the most accurate measure of your page content, you may want to temporarily set these to zero:

const originalPadding = document.body.style.padding;
const originalMargin = document.body.style.margin;

document.body.style.padding = ‘0‘;  
document.body.style.margin = ‘0‘;

const pageWidth = document.body.offsetWidth;
const pageHeight = document.body.offsetHeight;

document.body.style.padding = originalPadding;
document.body.style.margin = originalMargin;

This ensures you‘re measuring from the edges of the content itself, ignoring any spacing added by styles.

The document size can be useful for things like full-page scrolling effects, where you want to animate or snap to specific sections of the content. It can also help determine if a user has scrolled to the bottom of the page.

Potential Use Cases

So why would you want to know the screen size with JavaScript? Here are a few potential applications:

Responsive design: You can use the viewport dimensions to conditionally load different assets or lay out your UI differently depending on the available space. For example, you might show a simplified mobile layout on viewports under 600px wide.

Analytics: Tracking screen resolutions can help you understand what devices your visitors are using and how they‘re interacting with your site. You could log the window.innerWidth and window.innerHeight to your analytics platform to see the distribution of viewport sizes.

Accessibility: Knowing the screen size can help you optimize your site for vision-impaired users. For instance, you might increase the default font size if the screen resolution is below a certain threshold, or provide a way to zoom the page content.

Full-screen experiences: For immersive web apps like games or media players, you may want to detect when the user has toggled full-screen mode and adjust your UI accordingly. You can compare window.innerWidth to screen.width to see if the browser is currently full-screen.

Adaptive loading: If you know the screen size and device capabilities, you can adaptively load assets to provide the best experience for each user. For example, you might load high-res images for large desktop screens, but lower-quality images for mobile to improve performance.

Browser Compatibility

The screen size properties discussed here are supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. They even work in Internet Explorer back to version 4!

However, it‘s always a good idea to check for browser support before using any web API. You can use feature detection to conditionally run code based on whether the properties are available:

if (window.screen) {
  const screenWidth = window.screen.width;
  const screenHeight = window.screen.height;
  console.log(`Screen size: ${screenWidth}x${screenHeight}`);
}

This ensures your code won‘t throw errors in older browsers or devices where window.screen might not be supported.

Additional Tips

Here are a few more things to keep in mind when working with screen sizes in JavaScript:

• The screen size properties are read-only, so you can‘t set them directly. However, you can change the viewport size by resizing the browser window or using methods like window.resizeTo().
• Be aware that users can zoom the page content, which can affect the apparent size of the viewport and document. You can detect the current zoom level by comparing window.innerWidth to document.documentElement.clientWidth.
• When in doubt, always test your code on a variety of devices and screen sizes to ensure it works as intended. You can use tools like Chrome DevTools‘ Device Mode or physical devices to see how your site responds to different environments.
• For more advanced responsive design techniques, you can use the window.matchMedia() method to test arbitrary media queries in JS. This allows you to execute code based on whether the viewport matches a CSS media query string.

Conclusion

Detecting the screen size is a fundamental skill for creating dynamic, responsive web experiences. By using the built-in JavaScript properties like screen.width, window.innerHeight, and more, you can easily measure the dimensions of the user‘s display in pixels and adapt your application accordingly.

I hope this in-depth guide has given you a better understanding of how to work with screen sizes in JS. Feel free to bookmark this page as a reference, and happy coding!