Browser Size

Browser size is the live pixel dimensions of your browser viewport and the physical screen behind it, read directly from window.innerWidth, window.innerHeight, window.devicePixelRatio, window.screen.width, and window.screen.height. Viewport dimensions describe the area where the page can render; screen dimensions describe the display the window sits on.

This Browser Size tool listens for the resize event and re-reads those values whenever the window changes shape. Frontend developers, responsive QA engineers, and designers use a browser size readout to verify that a media query trips at the right breakpoint or to confirm what a screenshot at “1280×800” actually captures.

Why use Browser Size?

• Catch media-query off-by-one bugs. Resize until a layout shifts, read the exact viewport width, and compare against the breakpoint in your CSS.
• Spot device pixel ratio quirks. A 2x DPR explains blurry images, disappearing hairline borders, and screenshots that look bigger than expected.
• Confirm screenshots match your design. Line the viewport up with the canvas size your designer used before grabbing a snapshot.
• Verify responsive emulators. When DevTools’ device emulator reports one size and CSS behaves like another, the live numbers tell you who is lying.

How to use Browser Size

1. Open the page. The tool reads viewport and screen dimensions on load.
2. Read the five live cards: Viewport Width, Viewport Height, Device Pixel Ratio, Screen Width, and Screen Height.
3. Drag the browser window edge to resize it. The viewport cards update on every resize event.
4. Move the window to a second monitor with a different DPI to see the screen values change.

What gets detected

Every value comes from a window property defined by the CSSOM View Module spec. The table maps each card in the UI to its source and explains how to read it.

// Equivalent values you can read in the console
window.innerWidth
window.innerHeight
window.devicePixelRatio
window.screen.width
window.screen.height

All measurements run locally in your browser. The values come from the browser’s own layout engine and never leave your device.

Common use cases

• Frontend developers tuning CSS breakpoints. Find the exact width at which md: styles activate so a screenshot matches the spec.
• QA engineers writing repro steps for visual bugs. Capture the exact viewport so a developer can reproduce at the same dimensions.
• Designers reviewing implementations. Compare the live viewport against the Figma frame size before approving.

Frequently asked questions

What is the difference between viewport and screen?

The viewport is the area inside your browser window where the page renders. The screen is the physical display the window sits on. A maximized browser on a 1440-pixel monitor has a viewport equal to that width minus any sidebar.

Why does my browser report a different size than my screen?

The screen value is the full display. The viewport excludes the OS taskbar, the browser chrome, and any docked DevTools panel.

What is device pixel ratio?

Device pixel ratio (DPR) is how many physical pixels make up one CSS pixel. A 2x Retina display draws every CSS pixel with a 2×2 block of hardware pixels, exposed as window.devicePixelRatio.

Does this tool work on mobile?

Yes. On phones the viewport equals the screen width in CSS pixels (typically 360–430), while devicePixelRatio reveals the underlying display.

Why does viewport width include the scrollbar?

window.innerWidth reports the full content area width including the scrollbar gutter. Use document.documentElement.clientWidth to exclude it.

Can I detect a specific device from these numbers?

Not reliably. Many phones share the same CSS viewport and desktop browsers can be resized to anything. Use the viewport for layout, navigator.userAgentData for device class.

Does the page run any tracking?

No. All measurements come from window properties already available to any page. Nothing is sent to a server.

Related tools

• HAR Viewer: Open and inspect HTTP Archive files captured from DevTools.
• User-Agent Parser: Decode any user agent string into browser, OS, and engine.
• Browser Info: Show your current browser, OS, language, and hardware capabilities.
• PX ↔ REM Converter: Convert between CSS px and rem with a configurable base size.