The Screen Object

You will be able to read basic display information from the JavaScript screen object and choose when to use it instead of viewport measurements.

What it is

The screen object is a browser-provided object that describes the display area of the user's device. It is accessed as window.screen, but in most browser code you can simply write screen. Common properties include screen.width, screen.height, screen.availWidth, and screen.availHeight. Related terms are viewport, device pixel ratio, and orientation.

A useful mental model is: screen answers “How big is the display?” while window.innerWidth and window.innerHeight answer “How big is the browser window area I can draw in?”

Why it matters

• It helps you understand the total display size, which can be useful for diagnostics or optional UI adjustments.
• It can reveal usable display space through availWidth and availHeight, excluding OS elements such as taskbars or docks.
• It can support popup or external window sizing decisions, although viewport size is usually more important for page layout.
• It can be combined with window.devicePixelRatio when estimating physical pixel density for canvas or image work.
• It helps you avoid confusing device display size with the actual visible browser area.

Syntax or steps

Read the properties directly; they do not take arguments.

const displayWidth = screen.width;
const displayHeight = screen.height;
const usableWidth = screen.availWidth;
const usableHeight = screen.availHeight;

Use screen.width and screen.height for total display size. Use screen.availWidth and screen.availHeight when you need the area not occupied by OS interface elements.

Example

const screenInfo = {
  width: screen.width,
  height: screen.height,
  availWidth: screen.availWidth,
  availHeight: screen.availHeight
};

const viewportInfo = {
  width: window.innerWidth,
  height: window.innerHeight
};

console.log("Screen:", screenInfo);
console.log("Viewport:", viewportInfo);

if (screen.width < 768) {
  console.log("Small screen detected");
}

Part-by-part: The first object stores total and usable display dimensions. The second object stores the current browser viewport dimensions. The logs let you compare them. The final check uses screen.width only as a simple display-size example; for responsive layout, viewport-based checks are usually better.

Common mistakes

• Using screen.width as if it were the viewport. Fix: use window.innerWidth for layout inside the page.
• Assuming screen values never change. Fix: re-read values after display changes, window resizing, or orientation changes.
• Using deprecated properties such as colorDepth or pixelDepth for feature detection. Fix: use CSS media queries or canvas APIs when needed.
• Designing responsive layouts only from screen size. Fix: use CSS media queries based on viewport width and content breakpoints.

When to use it

The closest alternatives are viewport properties and media queries. Choose based on what you actually need to measure.

Practice

Guided exercise: open your browser console and run:

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

Expected output: two pairs of numbers. The viewport values may be smaller than the screen values, especially if the browser window is not maximized.

Challenge: write a function that logs whether the viewport is less than half the screen width. Hint: compare window.innerWidth with screen.width / 2.

function checkViewport() {
  if (window.innerWidth < screen.width / 2) {
    console.log("Viewport is narrow compared with the screen");
  }
}

Quick check

Question: If a browser window is maximized but the OS taskbar is visible, which property is likely smaller: screen.height or screen.availHeight?

Answer: screen.availHeight, because it excludes the taskbar.

Summary

The screen object gives information about the user's display, such as total and available screen dimensions. It is useful for diagnostics and display-aware logic, but it is not the same as the browser viewport.

For responsive page layout, prefer viewport measurements and media queries; use screen when you specifically need display-level information.