Check your current browser viewport dimensions in real time, identify which CSS breakpoint is active, and compare against common device presets — all without leaving this page.
Related tools: Screen Resolution → Screen Resolution Checker | Media Queries → CSS Media Query Generator
—
Width (px)
×
—
Height (px)
—
Breakpoint
window.innerWidth
—
Viewport width incl. scrollbar
window.innerHeight
—
Viewport height incl. scrollbar
document.documentElement
— × —
clientWidth × clientHeight
screen.width × screen.height
—
Physical screen resolution
devicePixelRatio
—
CSS px to physical px ratio
Orientation
—
Portrait / Landscape
Copied to clipboard!
Common Device Viewport Reference
| Device | Viewport (CSS px) | Tailwind BP | Notes |
|---|---|---|---|
| iPhone 15 Pro | 393 × 852 | xs | Portrait, @3x |
| iPhone 15 / 14 | 390 × 844 | xs | Portrait, @3x |
| iPhone SE (3rd gen) | 375 × 667 | xs | Portrait, @2x |
| iPad (10th gen) | 820 × 1180 | md | Portrait, @2x |
| iPad Pro 12.9" | 1024 × 1366 | lg | Portrait, @2x |
| Pixel 7 | 412 × 915 | xs | Portrait, @2.625x |
| Galaxy S24 | 360 × 780 | xs | Portrait, @3x |
| MacBook Air 13" | 1280 × 800 | xl | @2x Retina |
| MacBook Pro 14" | 1512 × 982 | xl | @2x Retina |
| MacBook Pro 16" | 1728 × 1117 | 2xl | @2x Retina |
| Desktop 1080p | 1920 × 1080 | 2xl | @1x standard |
How to Use
- Read the live numbers at the top — they update instantly as you resize the browser window.
- Check the breakpoint bar to see where you fall in the Tailwind CSS grid (xs / sm / md / lg / xl / 2xl).
- Compare to device presets in the table to understand how your page will look on real devices.
- Click “Copy All Info” to grab a text snapshot for bug reports or design handoffs.
What Each Measurement Means
| Property | What it measures |
|---|---|
window.innerWidth/Height | The visible viewport, including the scrollbar area |
clientWidth/Height | The viewport minus the scrollbar — matches your CSS media queries |
screen.width/Height | The physical display resolution (not affected by zoom) |
devicePixelRatio | How many physical pixels make up one CSS pixel (2 = Retina) |
Tailwind CSS Breakpoints Reference
| Prefix | Min-width | CSS rule |
|---|---|---|
| (none — xs) | 0 px | default styles |
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) |
Related tools: Screen Resolution → Screen Resolution Checker | Media Queries → CSS Media Query Generator