Responsive Breakpoint Previewer

About this tool

Responsive Breakpoint Previewer loads a public URL in sandboxed iframes at four fixed viewport widths: 375, 768, 1024 and 1440 pixels, each 667 px tall. Every frame renders the page at its real width and is then scaled down to a 320 px wide thumbnail so several fit side by side. The 375, 768 and 1024 px frames are on by default and the 1440 px frame can be toggled on. The thumbnails are view-only: they do not respond to scrolling or clicks, so you compare the first screen of each layout. URLs typed without a scheme get https:// added. The preview cannot bypass a site's X-Frame-Options or Content-Security-Policy frame restrictions, and plain-http addresses such as http://localhost do not load in the frames.

Why use it

• See up to four breakpoints at once without resizing your browser or opening DevTools.

• The fixed widths cover common phone, tablet, laptop and wide-desktop viewports.

• Toggle individual widths on or off to focus the comparison.

• Nothing to install; the frames load the page directly in your browser.

How to use

1. Enter the page address in the Website URL field (https:// is added if you leave it out).
2. Click Load or press Enter to render it in the active breakpoint frames.
3. Click the width buttons — 375px (Mobile), 768px (Tablet), 1024px (Desktop), 1440px (Wide) — to show or hide frames; at least one stays on.
4. Compare the scaled thumbnails side by side, scrolling the frame row sideways if they do not all fit.
5. If a frame stays blank, the site probably blocks iframe embedding; check it in DevTools device mode instead.

When it helps

• Quickly checking a responsive design at multiple breakpoints during development.
• Comparing mobile and desktop layouts side by side for a client review or stakeholder demo.
• Verifying breakpoint changes after editing CSS media queries.
• Testing a staging URL at device-specific widths before launch.
• Reviewing a competitor's responsive design quickly across viewports.

Examples

URL: https://example.com (default widths)

Three thumbnails labelled 375px — Mobile, 768px — Tablet and 1024px — Desktop, each showing the top 667 px of the page.

URL: https://example.com, then click 1440px (Wide)

A fourth frame labelled 1440px — Wide appears at the right of the row.

example.com

The field is rewritten to https://example.com and the frames load that address.

URL: https://accounts.google.com

Frames stay blank — Google sets frame-ancestors restrictions, so the page cannot be embedded. Use DevTools instead.

Tips

• Some sites set frame-ancestors CSP headers and refuse to load in iframes — major sites like Google, Facebook, and bank logins are blocked. Test those in DevTools instead.
• Turn on the 1440px (Wide) frame when checking large-desktop layouts; it is off by default.
• Click Load again after deploying to reload every active frame against the new code.
• If a frame shows a horizontal scrollbar, your page has horizontal overflow at that width — investigate min-width or fixed-width content.
• For widths the tool does not offer, such as 320, 412 or 1920 px, use your browser's DevTools device mode.
• Test landscape phones (812px width) too — many designs only check portrait widths and break in landscape.

Frequently Asked Questions

Glossary

Breakpoint

A viewport width threshold at which a CSS layout changes — typically expressed as min-width or max-width media queries.

Media query

CSS @media rule that applies styles only when conditions are met (viewport width, orientation, prefers-color-scheme, etc.).

Mobile-first design

Authoring CSS for the smallest viewport first, then layering larger-breakpoint overrides via min-width media queries.

Viewport

The visible area of the browser window (or iframe). Measured in CSS pixels, not device pixels — separate from physical screen resolution.

Device pixel ratio (DPR)

Ratio of physical pixels to CSS pixels. Retina screens have DPR 2 or 3 — important for image sourcing but transparent for layout.

Tailwind breakpoints

Default Tailwind v3 breakpoints: sm=640px, md=768px, lg=1024px, xl=1280px, 2xl=1536px. Customizable in tailwind.config.js.

X-Frame-Options / frame-ancestors

HTTP headers that prevent a page from being embedded in iframes. Many major sites set these for clickjacking protection — those URLs cannot be previewed.

Container query

Modern CSS feature that styles based on the size of a parent container rather than the viewport. Complements but doesn't replace media queries.