JS Screen

The screen object describes the display the browser is on: how many pixels it has, how much of it is free for windows, and how it is turned. It is easy to confuse with the window, which is only the part of the screen the browser occupies. This lesson shows what screen reports, why the numbers differ from the window, and what to use instead for responsive pages.

// Screen Versus Window

The screen is the whole display. The window is the browser on it. The viewport is the page area inside the window. Three different sizes, and they are rarely equal:

// Reading the Screen

console.log(screen.width > 0, screen.height > 0);
console.log(screen.availWidth <= screen.width);
console.log(screen.availHeight <= screen.height);
console.log(typeof screen.colorDepth, typeof screen.pixelDepth);

Log screen.width and screen.height yourself to see your own display. colorDepth and pixelDepth are how many bits describe each pixel's color; 24 is typical and effectively the same number on modern devices.

// Orientation

screen.orientation tells you whether the device is wider than it is tall. Its type is one of four text values:

const types = ["landscape-primary", "landscape-secondary", "portrait-primary", "portrait-secondary"];
console.log(types.includes(screen.orientation.type));
console.log(typeof screen.orientation.angle);

// Do Not Design With screen.width

It is tempting to read screen.width and choose a layout. Resist it. The screen size is not how much room your page has: the browser window can be smaller, split beside another app, or zoomed. What matters is the viewport. Two better tools:

• CSS media queries, written in your stylesheet, react to the viewport without any JavaScript
• window.matchMedia("(min-width: 600px)") lets JavaScript ask the same question

// matchMedia: A Media Query in JavaScript

matchMedia takes a media query as text and returns an object whose matches is true or false right now. It can also tell you when the answer changes:

const wide = window.matchMedia("(min-width: 0px)");
console.log(typeof wide.matches, wide.matches);

const never = window.matchMedia("(min-width: 100000px)");
console.log(never.matches);

const query = window.matchMedia("(max-width: 600px)");

function update() {
  console.log(query.matches ? "small screen layout" : "large screen layout");
}

update();
query.addEventListener("change", update);

Media queries can ask about more than width: "(prefers-color-scheme: dark)" tells you if the person chose a dark theme, and "(prefers-reduced-motion: reduce)" tells you if they asked to avoid animation.

// Quick Check

console.log(screen.availWidth <= screen.width);

// Try It

▶ Open Playground

1. Click Open Playground and run it. Write down your own screen and viewport sizes
2. Change a number in the matchMedia query so the answer flips from true to false
3. Ask matchMedia("(prefers-color-scheme: dark)") whether your device is in dark mode
4. Turn your device sideways (or resize the window) and see which values change and which do not