QuickTooly

What Is My Viewport?

Instantly check your browser's viewport width and height, device pixel ratio, and active CSS breakpoint for both Tailwind CSS and Bootstrap. The values update live as you resize your window — no page refresh needed.

Live Viewport & Breakpoint Checker

Unlike screen resolution, your viewport is the visible area inside the browser window. It changes when you resize the window, zoom in or out, or open/close the browser's developer tools panel — making it the measurement that actually drives your CSS media queries.

Your Browser Viewport

0 × 0

width × height in CSS pixels

Landscape1× DPR

Width

0px

Height

0px

Pixel Ratio

1×

Tailwind CSS Breakpoint

xs <640sm ≥640md ≥768lg ≥1024xl ≥12802xl ≥1536

Bootstrap 5 Breakpoint

xs <576sm ≥576md ≥768lg ≥992xl ≥1200xxl ≥1400

Related Developer Tools

Screen ResolutionWhat Is My BrowserColor PickerIP Lookup

Last updated: May 22 2026

Reviewed by the QuickTooly Team

Viewport Size Guide

Why Check Your Viewport Size?

  • Responsive debugging: Instantly see which CSS breakpoint is active without opening DevTools.
  • Live updates: Values refresh in real time as you drag to resize your browser window.
  • Framework-aware: Shows active breakpoint for both Tailwind CSS and Bootstrap 5 simultaneously.
  • DPR awareness: Device pixel ratio tells you how many physical pixels back each CSS pixel — essential for hi-DPI image sizing.
  • Zero install: Works entirely in your browser — no extensions, plugins, or sign-up required.

Viewport vs. Screen Resolution

Your screen resolution is fixed — it's the total number of physical pixels your monitor has (e.g. 2560×1440). Your viewport is the portion of that screen your browser's content area currently occupies. It shrinks when the browser chrome (toolbars, sidebars, DevTools) is visible and grows when you go full screen. This is the dimension your CSS @media queries actually respond to.

Tailwind CSS Breakpoints

Tailwind uses a mobile-first approach. A prefix like md: applies at 768 px and above:

  • xs — 0–639 px (no prefix needed, default styles)
  • sm — ≥ 640 px
  • md — ≥ 768 px
  • lg — ≥ 1024 px
  • xl — ≥ 1280 px
  • 2xl — ≥ 1536 px

Bootstrap 5 Breakpoints

  • xs — 0–575 px
  • sm — ≥ 576 px
  • md — ≥ 768 px
  • lg — ≥ 992 px
  • xl — ≥ 1200 px
  • xxl — ≥ 1400 px

What Is Device Pixel Ratio (DPR)?

DPR is the ratio of physical screen pixels to CSS pixels. A DPR of 2 (common on Retina displays) means 4 physical pixels back every CSS pixel — images look sharper but need to be 2× larger in each dimension to avoid blurriness. Use this value to decide whether to serve standard or high-resolution assets.

Frequently Asked Questions

Why is my viewport smaller than my screen resolution?

Browser chrome — the address bar, tabs, bookmarks toolbar, and any open side panels — takes up space outside the viewport. Only the area where web content is rendered counts as the viewport.

Does opening DevTools change my viewport?

Yes. When DevTools is docked to the side it reduces viewport width; when docked to the bottom it reduces viewport height. This is why you may see a different active breakpoint with DevTools open versus closed.

How do I simulate a specific viewport in Chrome?

Open DevTools (F12), click the device-toggle icon (or press Ctrl+Shift+M / Cmd+Shift+M), then enter a custom width and height. This tool will reflect whatever viewport the browser reports.

What does DPR 3 mean for images?

A DPR of 3 means your screen packs 3 physical pixels per CSS pixel. To display a crisp 100×100 CSS-pixel image you should provide a 300×300 physical-pixel source, either via srcset or CSS image-set().

Is this data sent to any server?

No. All values are read from the browser's window object directly in your browser. Nothing is transmitted to any server.