Viewport Tester
Compare viewport presets and see which common breakpoints they match.
Overview
The Viewport Tester compares common device viewport presets (iPhone 15, iPad, MacBook, common Android sizes, desktop monitors) and shows which standard CSS breakpoints they fall into. Useful for confirming how your responsive design responds to real-world device widths before opening DevTools.
Useful for designers and front-end developers learning how to test responsive design viewport sizes or how to match common device widths to CSS breakpoints. Reach for it during QA on a new responsive layout or when picking the right breakpoint values for a fresh CSS reset.
How it works
The browser viewport — the area where CSS units like vw are computed and where media queries resolve — depends on the device pixel ratio, the meta viewport declaration, and the orientation. The tester lists each preset by its CSS pixel width (not physical pixel width), because that's what CSS media queries measure.
The tool also shows the rendered 1rem, 1vw, and 1vh values per preset, and which Bootstrap, Tailwind, and Material breakpoints each device falls into. The classic mobile-first breakpoint set is 640px, 768px, 1024px, 1280px, 1536px.
Examples
- iPhone 15: 393x852 CSS px, matches Tailwind
smboundary at 640px no, falls under it. - iPad Mini: 768x1024 CSS px, hits Tailwind's
mdbreakpoint exactly. - MacBook 13": 1440x900 CSS px, falls in the
xlrange. - A common Android phone (390x844): treated identically to most iPhones for CSS breakpoint matching.
FAQ
Why does CSS-pixel width differ from device-pixel width?
CSS pixels are device-independent and scaled by the device pixel ratio. An iPhone 15 with a 1170-pixel-wide physical display has a 393-CSS-pixel viewport (3x device pixel ratio).
Should I pick breakpoints based on devices?
No. Pick breakpoints based on where your layout starts to look bad, not based on specific device sizes. Devices proliferate and become obsolete; layouts last.
What about foldable devices?
Foldables have two effective viewports (folded and unfolded). The viewport-segments API exposes the geometry, and CSS environment variables let you adapt — beyond the scope of this tester.
Does the meta viewport tag affect this?
Yes — without <meta name="viewport" content="width=device-width">, mobile browsers default to a 980px CSS-pixel viewport and zoom out, breaking responsive layouts entirely.