JavaScript — Screen

The screen object

console.log(screen);

Describes the physical display the browser window sits on.

Screen vs viewport — know the difference

Screen
┌──────────────────────────────┐
│                              │
│       Browser window         │
│       ┌──────────────┐       │
│       │   viewport   │       │
│       └──────────────┘       │
│                              │
└──────────────────────────────┘

screen.width        → whole display
window.innerWidth   → just the page area

Available dimensions

screen.width;         // e.g. 1920
screen.height;        // e.g. 1080
screen.availWidth;    // minus OS chrome
screen.availHeight;   // taskbar subtracted!

Color depth

screen.colorDepth;    // typically 24 or 30 (bits per pixel)
screen.pixelDepth;    // usually identical in modern browsers

Orientation

screen.orientation.type;    // "landscape-primary", "portrait-primary"…
screen.orientation.angle;   // 0 / 90 / 180 / 270

screen.orientation.addEventListener("change", () => {
    console.log(screen.orientation.type);   // phone rotation
});

Locking (await screen.orientation.lock("portrait")) exists for specialized full-screen apps only — heavily restricted.

The big warning: don't do responsive JS with screen.width

screen.width describes the monitor, not your page's room. A phone reports ~390px viewport on a large external monitor scenario, etc. For layout decisions:

• CSS media queries — styling (always preferred)
• matchMedia — when JS behavior must switch:

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

Legit screen uses: analytics ("how big are our users' displays?"), fullscreen canvas sizing, kiosk apps.

Multiple monitors note

Basic properties describe the display of the current browsing context only — don't assume they reveal every connected monitor.

Mini Practice

1. Log all four dimension values; compare with innerWidth/innerHeight.
2. Resize the window — prove screen values DON'T change while innerWidth does.
3. Read colorDepth.
4. Rotate a phone/emulator; capture orientation change events.
5. Replace a hypothetical if (screen.width < 600) with matchMedia.

Next: location →