What Is My Viewport Size?
Your viewport size is the visible area of your browser window measured in CSS pixels - and this free viewport checker shows it instantly, updating live as you resize.
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
width × height in CSS pixels
Width
0px
Height
0px
Pixel Ratio
1×
Tailwind CSS Breakpoint
Bootstrap 5 Breakpoint
Related Developer Tools
Last updated: May 22 2026
Reviewed by QuickTooly Team
Viewport Size Guide
Why Check Your Viewport Size?
This viewport size checker is used by front-end developers and designers to debug responsive layouts without opening browser DevTools. Here's why it's useful:
- 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.
CSS Framework Breakpoints Reference
Both Tailwind CSS and Bootstrap 5 use viewport width thresholds to define breakpoints. Your currently active breakpoint for each framework is highlighted in the checker above.
Tailwind CSS Breakpoints
Tailwind uses a mobile-first approach. A prefix like md: applies at 768 px and above:
| Prefix | Min Width | CSS Rule |
|---|---|---|
| xs | - | width < 640px (default, no prefix) |
| sm | 640 px | @media (min-width: 640px) |
| md | 768 px | @media (min-width: 768px) |
| lg | 1024 px | @media (min-width: 1024px) |
| xl | 1280 px | @media (min-width: 1280px) |
| 2xl | 1536 px | @media (min-width: 1536px) |
Bootstrap 5 Breakpoints
| Class Infix | Min Width | CSS Rule |
|---|---|---|
| xs | - | width < 576px (default, no infix) |
| sm | 576 px | @media (min-width: 576px) |
| md | 768 px | @media (min-width: 768px) |
| lg | 992 px | @media (min-width: 992px) |
| xl | 1200 px | @media (min-width: 1200px) |
| xxl | 1400 px | @media (min-width: 1400px) |
The Viewport Meta Tag
Separate from your browser viewport size, the HTML <meta name="viewport" content="width=device-width, initial-scale=1"> tag instructs mobile browsers to match the device's logical width instead of rendering at a zoomed-out desktop width. Without it, media queries often behave unexpectedly on phones - the browser assumes a ~980 px wide canvas and the responsive layout you designed never triggers.
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.
What is the standard viewport width?
There is no single standard. Common viewport widths by device category: 360–414 px (mobile phones), 768–1024 px (tablets), 1280–1920 px (laptops and desktops). CSS media queries let you target each range with tailored styles, which is exactly what Tailwind CSS and Bootstrap breakpoints are designed for.
What is the viewport meta tag?
The viewport meta tag - <meta name="viewport" content="width=device-width, initial-scale=1"> - tells mobile browsers to use the device's logical CSS width as the viewport width instead of a default ~980 px desktop canvas. Without it, your media queries will not fire at the intended breakpoints on phones. It belongs in the <head> of every responsive HTML page.