What is the difference between window.innerWidth and screen.width?

innerWidth is the current browser viewport (changes when you resize the window). screen.width is the whole physical display (doesn't change unless you switch monitors).

Why does clientWidth differ from innerWidth?

documentElement.clientWidth excludes the vertical scrollbar; innerWidth includes it. The difference is typically 15-17 px on desktop.

What does color depth tell me?

Bits per pixel — typically 24 (8 each for R/G/B) or 30 (10-bit HDR displays). Useful when checking whether a deep-color path is available.

Is anything reported externally?

No. The tool only reads values from the browser and shows them on the page.

viewport · screen · live · resize · local

Live screen & viewport measurements

Real-time readout of every window/screen measurement: inner size, client size, screen size, available size, orientation, color depth — updates as you resize.

Screen & Viewport Size

Resize the window

Status

—

input · live

Window vs document: window includes scrollbars, documentElement does not.

Screen describes the physical display; available accounts for taskbars/docks.

Resize the browser or rotate your device to see the values change live.

output · measurements

Loading…

Quick Start

Reading the numbers

The browser exposes window sizes, document element sizes, and the physical screen. Resize and rotate to see how each metric changes.

01
Note viewport
window.innerWidth — what your CSS sees as 100vw.
Inputs are treated as UTF-8 throughout the pipeline and validated client-side as you type — nothing dispatches until the value is well-formed.
windowinpututf-8client-sidevalidated
inner · text1280 · set
```
1280 × 720
```
loaded · parsedclient-side
02
Check scrollbar
innerWidth − clientWidth = scrollbar pixels.
Each toggle re-computes through a memoised hook, so flipping options never resets your input and the UI stays snappy on large inputs.
baroptionslivememoisedtoggles
scrollbar · memoised15px · live
```
15 px
```
options set · memoisedlive
03
Screen
screen.* covers the physical display.
Randomness — where used — comes from crypto.getRandomValues, never Math.random. Heavy work sits in useMemo.
displaycomputeinstantlocaldeterministic
screen · instant1920×1080 · computed
```
physical px
```
computed · instantinstant
04
Copy summary
One click copies the full readout.
Copy writes through navigator.clipboard and downloads use a Blob — zero network traffic. Same input plus same options always yield the same bytes.
copydownloadzero-networkreproducible
ok · copiedready · copied
```
Copied
```
shipped · ready to shipsuccess

Pro tips

Pro tips for everyday utilities

Reach for crypto.getRandomValues

Cryptographically random for IDs, tokens, salts. Math.random is for animation and games, not security.

Sort IDs lexicographically

UUID v4 has no time ordering. Use ULID or UUID v7 if you need sorted IDs.

Mock data with seeds

Faker-style libraries can be seeded so tests are reproducible. Embed the seed in the fixture file.

Reference cards beat memory

Cheatsheets for Vim, Git, Docker, Linux signals are faster than man pages when you’re mid-flow.

Browser APIs vary

Touch events, gamepads, and clipboard differ across vendors. Feature-detect before use.

Persist in the right place

localStorage for user preferences, sessionStorage for transient state, IndexedDB for structured data.

Use Cases

When to measure the viewport

Responsive design, bug repros, screenshots.

Responsive design

Find the breakpoint that's misbehaving. Random values come from crypto.getRandomValues — cryptographically secure for tokens, salts, and session IDs. Math.random is deterministic enough for animations but predictable enough to be a security bug.

CSPRNG-backed

Bug repros

Attach exact viewport to issue tickets. Pair with hashids, ULID, or UUID v7 when you need both random and sortable — useful for primary keys, public-facing IDs, and event log ordering without a sequence column.

reproducible

Screenshot precision

Resize to a known target before capturing. Output is deterministic given the same seed, so fixtures and tests stay reproducible across CI runs and contributor machines. Embed the seed in the fixture file for full replay.

snappy

Devtools alt

Open without the toolbar to confirm real sizes. Heavy work runs through useMemo so the UI stays snappy on large inputs. Same input + same options yields identical bytes — the kind of stability snapshot tests rely on.

feature-detected

Rotation testing

Watch orientation change on mobile devices. Storage tools persist to the right backend: localStorage for user preferences, sessionStorage for transient state, IndexedDB for structured data. Pick the right shelf and quota worries disappear.

deterministic

Color depth

Quick check for HDR / 10-bit support. Browser feature detection: clipboard, fullscreen, gamepad, and Web Bluetooth APIs gracefully fall back when unavailable. No surprise white screens on Safari or older Firefox.

production-ready

FAQ

Frequently asked questions

Window vs document?

Window includes scrollbars; document.clientWidth/Height excludes them.

What's available vs screen?

Screen is the full display; available subtracts OS chrome (taskbar, dock).

Why is screen size different than display?

Browser zoom and devicePixelRatio affect the reported values.

Does it work on mobile?

Yes — orientation change is also watched.

Does it run locally?

Yes — all measurements are local. Nothing is sent to a server.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!