Why does the responsive design breakpoint tester fail to load some URLs?

Most production sites send X-Frame-Options: DENY or a CSP frame-ancestors header. Browsers honour those and refuse to render the page in our iframe. Paste the HTML/CSS instead in srcdoc mode.

Why scale the iframes down instead of using CSS media queries?

Media queries only fire at the viewport width. Scaling a real iframe at the target width is the only way to see the page exactly as a 320px-wide phone would see it, including image scaling and font shaping.

Is my pasted HTML sent anywhere?

No. It is set as the srcdoc of a sandboxed iframe and runs entirely inside your browser. The sandbox attribute disables top-level navigation and limits scripts.

Which breakpoints does the tool cover?

320, 375, 414, 768, 1024, 1280, 1440, and 1920 pixels — the eight common targets for mobile (S/M/L), tablet, laptop, desktop, wide, and Full HD displays.

Can I add custom breakpoints?

Not from the UI. Edit the BREAKPOINTS array at the top of components/tools/ResponsiveDesignBreakpointTester.tsx if you need additional widths.

Responsive Design Breakpoint Tester

Preview HTML/CSS or a URL at eight common viewport widths from 320 to 1920 pixels.

Written by Golam Rabbani, Founder & Lead Engineer

This interactive tool requires JavaScript. Read the formula and worked example below; you can compute the result by hand.

Preview source

HTML / CSS to preview

Rendered inside a sandboxed iframe via srcdoc.

How to use this responsive design breakpoint tester

Pick a preview source: paste HTML/CSS into a sandboxed iframe, or load a URL (most sites block this).
Paste your markup into the textarea (or click Load sample HTML for a working example).
Press Render breakpoints to spin up eight scaled iframes at 320, 375, 414, 768, 1024, 1280, 1440, and 1920 pixels wide.
Scroll horizontally across the row and inspect how the layout reflows at each width.
Reset to clear the input or swap between srcdoc and URL modes.

About this responsive design breakpoint tester

The responsive design breakpoint tester renders your HTML/CSS at the eight viewport widths most teams target: 320 (Mobile S), 375 (Mobile M), 414 (Mobile L), 768 (Tablet), 1024 (Laptop), 1280 (Desktop), 1440 (Wide), and 1920 (Full HD). Each preview is a real iframe at that pixel width, scaled down with a CSS transform so it fits the row — so what you see is the layout the browser would actually produce at that width, not a media-query simulation.

Worked example: paste a card layout that uses display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) and press Render breakpoints. At 320px the grid collapses to two columns of about 120px each, at 768px the same card spreads into four columns, and at 1280px+ the card hits its max-width and centers in whitespace. Catching each reflow side-by-side beats refreshing in DevTools.

The srcdoc mode renders inside a sandboxed iframe so untrusted pasted content cannot read your cookies. URL mode is best-effort — many sites send X-Frame-Options or frame-ancestors headers and will refuse to load; in that case fall back to pasting their HTML.

FAQ

Why does the responsive design breakpoint tester fail to load some URLs?: Most production sites send X-Frame-Options: DENY or a CSP frame-ancestors header. Browsers honour those and refuse to render the page in our iframe. Paste the HTML/CSS instead in srcdoc mode.
Why scale the iframes down instead of using CSS media queries?: Media queries only fire at the viewport width. Scaling a real iframe at the target width is the only way to see the page exactly as a 320px-wide phone would see it, including image scaling and font shaping.
Is my pasted HTML sent anywhere?: No. It is set as the srcdoc of a sandboxed iframe and runs entirely inside your browser. The sandbox attribute disables top-level navigation and limits scripts.
Which breakpoints does the tool cover?: 320, 375, 414, 768, 1024, 1280, 1440, and 1920 pixels — the eight common targets for mobile (S/M/L), tablet, laptop, desktop, wide, and Full HD displays.
Can I add custom breakpoints?: Not from the UI. Edit the BREAKPOINTS array at the top of components/tools/ResponsiveDesignBreakpointTester.tsx if you need additional widths.