How to Get the Screen Width and Height in JavaScript

Understanding the dimensions of a user‘s screen is critical for building responsive, adaptive web applications in JavaScript. By getting the screen width and height, you can dynamically adjust layouts and content to optimize the viewing experience across devices.

In this comprehensive guide, we‘ll explore the ins and outs of determining screen dimensions with JavaScript.

Overview

Here are some key things we‘ll cover:

• The window.screen object and its properties for getting screen width/height
• Differences between outer and inner dimensions
• Handling mobile devices and zoom levels
• When to check screen size in responsive design
• Use cases like dynamic content, media queries, etc.

Understanding these concepts will equip you to properly handle screen dimensions in your own projects.

The Screen Object

The starting point for getting screen dimensions is the window.screen object in JavaScript. This contains information about the user‘s display.

Some key properties are:

• screen.width – The full width of the screen, in pixels
• screen.height – The full height of the screen in pixels
• screen.availWidth – Width excluding interface features like taskbars
• screen.availHeight – Height without interface elements

Let‘s look at some examples retrieving these values:

// Full width
const fullWidth = window.screen.width; 

// Full height 
const fullHeight = window.screen.height;

// Width without UI elements
const availWidth = window.screen.availWidth;

// Height without UI elements
const availHeight = window.screen.availHeight;

This gives the basic idea – use the screen object to get width/height details.

Outer vs Inner Dimensions

An important distinction is outer dimensions versus inner dimensions:

• Outer – The full screen dimensions, including UI elements like taskbars. This is screen.width/height.
• Inner – The space available for displaying content, excluding UI elements. This is screen.availWidth/availHeight.

Here is a diagram to visualize the difference:

Which one you want depends on your specific use case.

If you‘re adjusting layouts, you likely want the inner width/height – this represents the actual space you have to display content.

But if you want to get the full screen dimensions, use the outer properties.

Handling Mobile Devices

Determining dimensions gets slightly tricky with mobile devices…

Some things to keep in mind:

• Zooming – Users can zoom in/out on mobile, changing the effective dimensions.
• Orientation – Rotating a mobile device can drastically change dimensions.

Let‘s look at some code to properly handle these cases.

To address zooming, you need to handle the devicePixelRatio:

// Handle zooming on mobile
const width = window.innerWidth / window.devicePixelRatio;

const height = window.innerHeight / window.devicePixelRatio; 

This gives you actual CSS pixels, accounting for zoom.

And for orientation, listen for the orientationchange event:

// Listen for orientation changes  
window.addEventListener(‘orientationchange‘, function() {

  // Update dimensions as needed
  getDimensions();

}, false);

Now you can refresh the width/height when users rotate their device.

With these tweaks, your dimensions will properly account for mobile quirks.

When To Check Screen Size

A common question is when you should check for screen size changes.

The browser viewport can resize dynamically in several cases:

• User resizes their window
• Mobile orientation changes
• Zooming in/out on mobile
• And more…

To catch these events, you can listen for the resize event on window:

// Listen for resizes
window.addEventListener(‘resize‘, function() {

  // Screen size changed - update dimensions 
  getDimensions();

});

Now whenever the viewport changes, you can update accordingly.

You can also debounce the resize callback to prevent it from firing too quickly during resize.

Overall this ensures you adapt if the user actively changes their screen size.

Use Cases

There are plenty of good reasons to get screen dimensions in JavaScript:

Responsive Design

The most common use case is responsive web design:

• Dynamically update CSS based on media queries
• Change layouts based on space available
• Adapt content like images or text size

Knowing the viewport width is key for building responsive interfaces.

Here is sample logic with a width-based media query:

// Media query match example 

const width = getViewportWidth(); // Get width

if (width < 500) {

  // Match smartphone media query
  useMobileLayout(); 

} else {

  // Match wider layout 
  useDesktopLayout();

}

This allows adapting the design dynamically based on screen size.

Orientation Handling

Another use case is handling different orientations, like in mobile apps.

You can customize the UI based on whether the device is landscape or portrait:

// Handle orientations

const height = getViewportHeight();
const width = getViewportWidth();

if (height > width) {
  // Portrait orientation
  setupPortraitLayout();

} else  {
  // Landscape
  setupLandscapeLayout();
}

This creates an orientation-aware experience.

Dynamic Content

Finally, you may want to adjust content based on dimensions – like image sizes or text amount.

For example:

// Dynamic content based on dimensions

const viewportWidth = getViewportWidth();

if (viewportWidth < 480) {

  // Smaller screen - show smaller hero image
  heroImg.src = hero-mobile.jpg;

} else {

  // Bigger screen - use higher-res image 
  heroImg.src = hero-desktop.jpg; 

}

This optimizes content for the user‘s screen.

As you can see there are all kinds of creative applications for getting viewport dimensions. The key is reacting and adapting your UI appropriately.

Common Questions

Here are some common questions that arise around getting screen size with JavaScript:

Should I use innerWidth or screen.width?

If you want the maximum screen dimensions use screen.width. But for the viewable content area, use window.innerWidth.

What about just using CSS Media Queries?

Media queries are great, but sometimes you need to respond programmatically in JavaScript as well. Use queries for adaptive styling and JS when you need to change application logic.

How often should I poll for dimension changes?

No need to constantly poll – just use event listeners like resize and orientationchange to listen for relevant changes, then adapt your UI in the callbacks.

This covers some top things people ask about screen dimensions.

Conclusion

Getting accurate screen width and height is important for robust web experiences.

Key takeways:

• Use the screen object to get outer and inner dimensions
• Handle mobile quirks like zooming and orientation
• Listen for resize events to catch changes
• Adapt UI and content based on media queries

With these fundamentals in hand, you can build truly adaptive interfaces!

For more reading check out my ebook Responsive Design Patterns for web developers.

I hope this guide gave you a solid baseline for working with screen dimensions in JavaScript. Happy coding!