Responsive design tester

How it works

• Real widths, not a squeezed picture. Each preview is an <iframe> laid out at the device's full width and height in CSS pixels, then shrunk to fit your screen with a CSS transform. A transform doesn't change layout, so the page inside still sees, say, 393 px — window.innerWidth, @media (max-width: …) and container sizes all behave as on a 393 px screen.
• One zoom for every frame. Fit puts all frames side by side when they stay at least 30% size, otherwise it makes the widest frame fill the row. The zoom in use is shown above the frames; at 100% each frame is its true size and scrolls sideways on a small screen.
• Device sizes are not typed by hand. Phone and tablet sizes come from the device list in puppeteer-core 24.43.1, the list Chrome's DevTools device mode uses. Widths are what breakpoints respond to; some heights in that list leave out the browser's toolbars and some don't. Landscape swaps width and height. The desktop sizes are plain window widths.
• Nothing goes through us. Your browser loads the address straight from that site. We never see what you type or paste.

What a preview can't copy from a real phone

• Sites that refuse to be framed. Many sites (big ones especially) send an X-Frame-Options header or a Content-Security-Policy: frame-ancestors rule that tells browsers not to show them inside another page. The browser obeys, and no web page can see why a frame stayed empty. Test those with Paste HTML (copy the page's source; add <base href="https://your-site/"> in the head so its images and CSS still load), or with your browser's own device mode.
• http:// pages. This page is https://, and browsers block plain http:// pages inside it, so the tester asks for the https:// address instead.
• The device itself. The frame has the device's width, but not its screen sharpness (devicePixelRatio), its browser name (sites that check the user agent still serve your current browser's version), its touch screen (pointer: coarse, hover: none) or its notch and toolbars.
• Signed-in pages. Browsers often hold back a site's cookies inside a frame on another site, so a page that needs you to be logged in may show its logged-out version.
• Leaving this page is blocked. A framed site can't send this tab elsewhere — handy, since some sites try. Links inside a frame open inside that frame.

How we test it

The code that builds each frame is run in Chrome 156 for every size here, upright and on its side, at five zoom settings: 140 frames in all. A small page inside each frame reports its own innerWidth, innerHeight and which media queries match; all must equal the size on the label, and the frame on screen must measure exactly that size times the zoom. Fit-zoom rows are packed into a page 358 and 1088 px wide and must never overflow. A framed page that tries to send the whole tab elsewhere must fail, and pasted HTML must not be able to read this page. 20 typed addresses must come out as expected. Deliberately broken versions — a frame resized instead of scaled, landscape not swapped, a fit zoom that forgets the gaps, a sandbox that lets the frame navigate the tab, pasted HTML allowed to reach this page, javascript: addresses let through — must each be caught.

Questions

Why does a site show its desktop version in the phone frame?

Usually because the site picks its layout from the browser's name (the user agent) rather than the screen width. A frame can't change the user agent. If your own site does this, the frame is showing you a real problem: a narrow desktop window would get the same page.

Is this the same as my browser's device mode?

For layout, yes — both give the page the device's width. Device mode also fakes the touch screen, pixel ratio and user agent, and it isn't blocked by X-Frame-Options. This tester's advantage is seeing several sizes at once, on any browser, including your phone.

Can I test a site on my own computer (localhost)?

Paste its HTML, or open the tester from your own machine. Whether a public https:// page may frame an http://localhost address depends on your browser and its local-network settings, so we don't promise it.

Which widths should I test?

Test the narrowest phone you support (320–360 px), a common phone (390–430 px), a tablet (768–834 px) and a laptop (1280 px or more) — and drag the custom width across each of your breakpoints. Layout bugs hide just above and below them.