Responsive Breakpoint Tester

Free tool No sign-up

URL

Note: sites that block iframing won't load

Custom Size

×

Zoom

100%

Tailwind Breakpoints

Devices

390 × 844

·base·portrait

390 × 844 @ 100%

About this tool

Preview any URL across iPhone, iPad, laptop, and desktop sizes — with Tailwind breakpoint detection, rotation, and live zoom.

?

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.