Free tool No sign-up
Responsive Breakpoint Tester
Preview any URL across iPhone, iPad, laptop, and desktop sizes — with Tailwind breakpoint detection, rotation, and live zoom.
responsivebreakpointviewportdevicetesting
Why test responsive breakpoints?
Catch issues before users do
Most layout bugs hide between breakpoints — at 720px, 980px, or in landscape on a small phone. A live tester surfaces those gaps in seconds, not after a bug report.
Faster than DevTools alone
Browser device-mode is great, but it's one viewport at a time. Side-by-side testing across iPhone, iPad, and desktop lets you compare layouts without context-switching.
Pixel-perfect handoff
Designers think in device sizes; engineers think in breakpoints. A device tester bridges both — verify a Figma 390×844 mock against the same dimensions on a live URL.
Validate Tailwind / framework breakpoints
See exactly where your sm / md / lg / xl rules kick in. The active breakpoint indicator confirms your media queries fire at the right widths — no guesswork.
How to use this tester
01
Enter your URL
Paste the URL you want to test (https:// is added automatically). The page loads in a sandboxed iframe so you can interact with it as a real visitor.
02
Pick a device or breakpoint
Choose from common devices (iPhone, iPad, laptop, desktop) or jump straight to a Tailwind breakpoint (sm, md, lg, xl, 2xl). Width and height update instantly.
03
Rotate or resize
Click Rotate to flip portrait ⇄ landscape, or type custom dimensions for any non-standard size. The active Tailwind breakpoint label updates live as you resize.
04
Zoom & copy
Auto-fit scales the preview to fill the canvas, or set a manual zoom for pixel-accurate inspection. Copy <iframe> to embed the same dimensions in your own page.
Tailwind breakpoint reference
| Prefix | Min width | Typical use |
|---|---|---|
sm | ≥ 640px | Small tablets, large phones in landscape |
md | ≥ 768px | iPad portrait, small laptops |
lg | ≥ 1024px | iPad landscape, standard laptops |
xl | ≥ 1280px | 13" / 15" laptops, common desktops |
2xl | ≥ 1536px | 1080p+ desktops, large monitors |
— base | < 640px | Mobile-first default — most phones |
Responsive patterns
@media
/* Mobile-first @media queries */
.card { padding: 16px; }
@media (min-width: 768px) {
.card { padding: 24px; }
}
@media (min-width: 1024px) {
.card { padding: 32px; }
} Tailwind
/* Tailwind responsive prefixes */
<div class="p-4 md:p-6 lg:p-8">
<h1 class="text-xl md:text-2xl lg:text-4xl">
Responsive heading
</h1>
</div> @container
/* Container queries — element-level */
.card-wrap { container-type: inline-size; }
@container (min-width: 480px) {
.card { display: grid; grid-template-columns: 1fr 2fr; }
} Pro tips
01
Test landscape too
Designers usually mock portrait, but landscape phones (e.g. 844×390) often break flex layouts and dropdowns. Rotate every preset at least once before shipping.
02
Watch for X-Frame headers
Some sites send X-Frame-Options: deny or a CSP frame-ancestors rule and refuse to load in iframes. That's a server config, not a bug — test those locally or on staging without the header.
03
Don't over-fit to devices
Designing for the iPhone 14 width is fine; designing only for it is not. Always slide a custom width across the full range to find layouts that break between named devices.
04
Check container queries
Modern CSS uses @container, not just @media. Component-level breakpoints are independent of viewport — verify them by resizing the container, not just the viewport.