myViewport Breakpoint Checker
Resize your browser and see exactly which CSS breakpoint is active — Tailwind, Bootstrap, MUI, and Chakra, live.
| Breakpoint | Prefix | Min width | CSS query |
|---|---|---|---|
| Extra small | — | 0px | @media (max-width: 639px) |
| Small | sm: | 640px | @media (min-width: 640px) |
| Medium | md: | 768px | @media (min-width: 768px) |
| Large | lg: | 1024px | @media (min-width: 1024px) |
| Extra large | xl: | 1280px | @media (min-width: 1280px) |
| 2X large | 2xl: | 1536px | @media (min-width: 1536px) |
About the Viewport & Breakpoint Checker
Building responsive layouts requires knowing exactly which breakpoint is active at any window size. This tool shows the current breakpoint label, exact pixel dimensions, and where you sit in the Tailwind, Bootstrap, Material UI, and Chakra UI breakpoint systems — all updating live as you resize.
How to use it
Simply open the page and resize your browser window. The large label updates instantly to show the active Tailwind breakpoint (xs, sm, md, lg, xl, 2xl), along with your exact viewport width and height in pixels and a table showing where you are across major CSS frameworks.
Common viewport debugging scenarios
Viewport tools are most useful when elements break at unexpected widths, when media queries do not trigger where expected, or when comparing behaviour across device types.
- CSS media query testing — verify the exact pixel width where your breakpoints trigger
- Mobile emulation gap — DevTools simulation differs from real device viewports; use this tool on a real device for ground truth
- Device pixel ratio (DPR) — DPR > 1 means CSS pixels are smaller than physical pixels; important for image srcset decisions
- Scrollbar offset — desktop browsers with scrollbars report a viewport ~15-17px narrower than the screen width