Responsive Design Tester
Your page at many screen sizes at once — rotate, resize and compare the layouts.
Your HTML
The frames update as you type. Your code runs in an isolated preview frame on a separate address, never on this site; relative links and images need a <base href="https://your-site/"> tag.
No frames: open Devices to add phones, tablets, laptops or custom sizes.
If a frame says the site refused to connect, the site does not allow framing: open it in a window of that size with the frame’s button.
About the Responsive Design Tester
Responsive pages change their layout with the width of the screen. This tester shows one page in several frames at once — phones, tablets, foldables, laptops and desktops, or the breakpoints of Bootstrap and Tailwind CSS — each exactly as wide and tall as that screen’s viewport in CSS pixels, so the page’s media queries react just as they would there. Rotate any frame, type an exact size to test the edge of a breakpoint, and zoom out to see every frame side by side.
Enter a website address, or switch to HTML and paste a page, an email template or a component you are building. Many large sites forbid being shown inside another page; for those, each frame can open the page in a separate browser window of the same size.
How to use it
- Enter the page’s address (for example
https://www.example.com/) and press Load. Every frame loads the page at its device’s viewport size. - Open Devices to pick a set — phones, tablets and foldables, laptops and desktops, Bootstrap or Tailwind breakpoints — or add single devices and custom sizes, up to eight frames.
- Use a frame’s rotate button for landscape, or type a new width and height to check a breakpoint exactly (767 and 768 px, for example). Rotate all turns every frame.
- Choose Fit to screen to see all frames at one common scale, or 100% to see a frame at its real size and scroll.
- If a frame says the site refused to connect, the site forbids framing: press the frame’s window button to open the page in a browser window of that size, or switch to HTML and paste the page’s code.
Examples
Custom frames of 991 × 800 and 992 × 800 on a page whose navbar uses .navbar-expand-lg
991 px: the menu is collapsed behind the toggler button 992 px: the full navigation is shown
Bootstrap’s lg breakpoint starts at 992 px (Bootstrap breakpoints), so 991 px is the last width with the collapsed menu.
<style>.sidebar { background: #eee } @media (max-width: 600px) { .sidebar { display: none } }</style>
<div class="sidebar">Sidebar</div>600 × 800: no sidebar (max-width includes 600 px) 601 × 800: the sidebar is shown
Common uses
- Checking a new design, landing page or template at the sizes your visitors use before it goes live.
- Finding the exact width where a layout breaks: text that overflows, buttons that wrap, menus that collapse too late.
- Comparing phone portrait and landscape, foldables folded and unfolded, and small laptops side by side.
- Testing an HTML email or component at narrow widths without a full development setup.
What the frames show — and what they cannot
Each frame is a real page in your own browser, with a viewport of exactly the size shown. CSS media queries, container queries and JavaScript that reads the window size see that size, so the layout is the one a device of that viewport gets.
What stays your computer’s:
- The user agent. Sites that pick a mobile version by user agent (a separate m. site, or a different page from the server) send the version for your browser.
- Pixel density. Images are chosen for your screen’s device pixel ratio, not the phone’s.
- Touch. Your mouse stays a mouse: hover menus open on hover, as they would not on a phone.
- Scrollbars. On Windows, a classic scrollbar takes part of the frame’s width; phones draw scrollbars over the page.
- Cookies and storage. A framed page gets no cookies or storage of its own here, so pages behind a login show their logged-out version, and a site that refuses to run without storage may stay blank.
For those details use your browser’s device emulation — in Chrome, DevTools and its Toggle device toolbar button (Chrome DevTools device mode) — or a real phone. Google itself calls DevTools’ device mode “a first-order approximation” of how a page looks and feels on a mobile device. A frame’s window button is the other way round: it opens the page in a real browser window whose page area is that size, with the site’s own cookies and storage, so what you see is what its visitors get.
Why some sites do not load in a frame
A site can forbid other pages to show it inside a frame with the X-Frame-Options header (DENY or SAMEORIGIN) or the frame-ancestors rule of its Content Security Policy (MDN: X-Frame-Options). Banks, social networks, search engines and many large shops do this to protect their users from clickjacking, and browsers then show an error page such as “refused to connect” in the frame. Nothing on this page can or should get around that.
For such sites — and for http:// pages, which browsers block inside an https:// page — use the frame’s Open in a window button: it opens the page in a separate browser window whose page area has the frame’s size (desktop browsers; phones open a normal tab). Your own site is usually framed fine, unless your server sends one of those headers; you can check with the Security Headers Checker.
Where the pages are framed
This page runs under a strict Content Security Policy of its own, which decides where a website may be framed:
- Directly, from the site’s own server into a frame on this page, when the policy allows it. The page keeps its own origin, so its scripts run as usual, but browsers keep a framed site’s storage (and in most browsers its cookies) apart from what it has in your tabs.
- Inside MySmartCoPilot’s isolated preview frame otherwise — the same separate address that runs pasted HTML. The page is still fetched from its own server by your browser, and still gets the frame’s exact viewport, but it runs in an isolated frame: no cookies, no local storage, and a page whose own policy or file checks (Subresource Integrity) expect its own origin may lose its styles or stay blank. The page says so above the frames when it happens.
In both cases the address you type goes only to the website itself and stays inside your browser, and nothing is sent to a MySmartCoPilot server. When a page looks wrong in a frame, the window button settles it: a real browser window of that size, with everything the site normally gets.
Where the sizes come from
Phone, foldable and tablet sizes are the CSS viewport sizes of the device list in Chrome DevTools (devtools-frontend, EmulatedDevices.ts), in portrait. Laptop and desktop sizes are common screen resolutions; a browser window on such a screen has a smaller viewport, because of its toolbars. Breakpoints are the defaults of Bootstrap 5 (576, 768, 992, 1200 and 1400 px) and Tailwind CSS (640, 768, 1024, 1280 and 1536 px), at 800 px tall.
Limitations
- Sites that forbid framing (X-Frame-Options or frame-ancestors) cannot be shown in the frames; open them in a sized window instead.
- Frames do not emulate a phone’s user agent, pixel density or touch input (see above).
- A framed page has no cookies or storage of its own, so logged-in views do not show, and a site that needs storage or checks its own origin may look unstyled or stay blank — the window button shows it as its visitors get it.
- Each frame is its own page: links you follow and scrolling in one frame do not move the others; press Reload to load the address again in all of them.
- HTML mode runs your code in an isolated frame on a separate address; relative links and images need a
<base href="https://your-site/">tag in the HTML. - Up to eight frames at a time. Very large frames (4K) are heavy on slower computers.
Privacy
Website mode: your browser requests the page straight from the website, as a framed page and without a referrer; the address is not sent to MySmartCoPilot. HTML mode: your code is passed inside your browser to MySmartCoPilot’s isolated preview frame, which shows it and stores nothing. The chosen devices and zoom are remembered in this browser only.
Frequently asked questions
Is this the same as Google’s Mobile-Friendly Test?
No. Google has retired its Mobile-Friendly Test — its address now leads to Lighthouse — and a responsive tester does not score anything: it shows you the layouts, so you can see for yourself what breaks. For lab measurements of a page use Page Speed Test, which runs Google’s Lighthouse.
Why does a frame say “refused to connect” or stay empty?
The site does not allow other pages to frame it (the X-Frame-Options header or the frame-ancestors rule of its Content Security Policy), or it is an http:// page, which browsers block inside an https:// page. Press the frame’s window button to open the page in a browser window of the same size.
Why does my site look different on my real phone?
A phone also differs in user agent, pixel density, fonts, touch input and scrollbars, and the browser’s own toolbars take part of its screen. The frames show the layout for the viewport size; for the rest, test on the device or in your browser’s device emulation.
Can I test a site running on my own computer (localhost)?
Use the window button: a separate window may open http://localhost addresses, while frames on this https page may not. You can also switch to HTML and paste your page’s built HTML, with a <base href> tag so its images and styles load.
Is the address or my HTML sent to MySmartCoPilot?
No. Your browser fetches the address from the website itself, and the address is passed on inside your browser (never to a MySmartCoPilot server). HTML is passed the same way to the isolated frame that displays it; it is never uploaded or stored.