The viewport is the visible area of a web page within the browser window. In mobile development, the viewport concept is critical — it determines how a web page renders at different screen sizes. The layout viewport is the basis for CSS layout, while the visual viewport is the area currently visible to the user.

How do I use this tool to debug responsive layouts?

Resize your browser window and the tool updates in real time. Compare against common breakpoints: mobile ( 1024px) to verify your CSS media queries fire correctly.

Free Online Viewport Size Checker

📏 Real-Time Viewport Detection

0
Viewport Width (px)

0
Viewport Height (px)

0

Screen Width (px)

0

Screen Height (px)

0

Device Pixel Ratio

0

Outer Width (px)

0

Outer Height (px)

0

Visual Viewport W

📱 Responsive Breakpoint Match:

XS (<480px) SM (480-767) MD (768-1023) LG (1024-1279) XL (≥1280)

📊 Physical vs CSS Pixels

0

CSS Pixel Width

0

Physical Pixel Width

0

CSS Pixel Height

0

Physical Pixel Height

Device Pixel Ratio 1x (1 CSS pixel = 1 physical pixels)

💡 Physical pixels = CSS pixels × DPR

📋 Size Change History

Last 5 viewport size changes:

Resize the browser window to record changes

What is a Viewport Size Checker?

The Viewport Size Checker is an essential online tool for frontend development and responsive design. It displays real-time CSS pixel dimensions of your browser viewport, physical screen resolution, Device Pixel Ratio (DPR), and other key parameters. Whether debugging CSS media query breakpoints or verifying responsive layouts across devices, this tool provides instant, accurate viewport information.

Detection Parameters

Viewport Width/Height: CSS pixel dimensions of the browser content area (window.innerWidth / innerHeight), excluding toolbars and borders
Screen Width/Height: Total device screen resolution (screen.width / screen.height) in CSS pixels
Device Pixel Ratio (DPR): Ratio of physical pixels to CSS pixels. Retina displays are typically 2x, 4K screens may be 3x or higher
Outer Width/Height: Full window dimensions including browser toolbars and borders (window.outerWidth / outerHeight)
Visual Viewport: The area currently visible to the user — shrinks when the mobile soft keyboard appears

Responsive Breakpoints Reference

XS: <480px — Mobile portrait
SM: 480-767px — Mobile landscape / large phones
MD: 768-1023px — Tablet portrait
LG: 1024-1279px — Tablet landscape / small laptops
XL: ≥1280px — Desktop monitors

How to Use

Step 1: Open the tool. Detection starts automatically on page load. All metrics immediately display current values — no clicks needed.

Step 2: Resize the window. Drag the browser window edge or press F12 to open DevTools and toggle device simulation mode. All data updates in real time, and the breakpoint indicator highlights the matching breakpoint. History records the last 5 size changes.

Step 3: Analyze results. The "Physical vs CSS Pixels" section shows how your screen renders at different pixel ratios. If DPR is 2 and viewport is 375px, you're on an iPhone — 750 physical pixels rendered within 375 CSS pixels via Retina display.

Step 4: Copy or record. Click "Copy Current Size" to copy viewport info to clipboard, perfect for sharing with team members or including precise environment data in bug reports.

Use Cases

Responsive Layout Debugging: Verify that CSS media queries fire at the correct breakpoints. This tool shows the exact viewport width in real time and highlights the matching breakpoint.

Cross-Device Testing: Combined with Chrome DevTools device simulation, quickly preview how your page appears on different devices (iPhone, iPad, Android phones). DPR and physical pixel data help understand Retina rendering.

Bug Reports: Get precise viewport and screen parameters to include in bug reports, dramatically reducing troubleshooting time.

Design Handoff: Designers typically create mockups at 375px or 1440px. Confirm your current viewport width matches the design to accurately assess fidelity.

Extended Knowledge

History of the Viewport: In early mobile web, Safari used a 960px default layout viewport to render desktop pages, requiring manual zooming. Apple introduced the viewport meta tag with the iPhone, allowing developers to control the layout viewport width — the foundation of modern responsive design.

100vh Issues & Solutions: On mobile browsers, 100vh doesn't always equal the full visible area because browser toolbars dynamically show/hide. Chrome introduced dvh (dynamic viewport height), and Safari supports lvh (large) and svh (small). The innerHeight detected by this tool is also affected — actual height may be slightly less than CSS 100vh.

FAQ

Q: What is a viewport?

A: The viewport is the visible area of a web page within the browser window. The layout viewport is the basis for CSS layout, while the visual viewport is the area currently visible to the user.

Q: What's the difference between CSS pixels and physical pixels?

A: CSS pixels (logical pixels) are abstract units used in web layout. Physical pixels are the actual dots on screen hardware. On Retina displays, 1 CSS pixel may map to 2-4 physical pixels. DPR is the ratio between them.

Q: Why does the detected size differ from my monitor resolution?

A: The browser reports viewport dimensions in CSS pixels. Display scaling (125%, 150%) or a non-maximized window reduces CSS pixel dimensions relative to physical resolution.

Q: Is my data uploaded to any server?

A: No. All detection runs locally using standard JavaScript APIs. No data is ever sent to any server.

Q: What's the difference between visual viewport and layout viewport?

A: The layout viewport is the CSS layout baseline width, typically set via meta viewport tag. The visual viewport is what the user currently sees — it shrinks when the mobile keyboard appears or the user zooms in.

📐 Online Viewport Size Checker