Responsive Design Viewer
Load a page in a frame at common device widths to check how its layout responds.
No page loaded yet. Enter a URL and select a width.
This runs entirely in your browser. The URL is loaded directly by your browser and nothing is uploaded to us.
How to use this tool
- Paste the full address of the page you want to check, including the https:// part.
- Pick a device width: mobile, tablet, desktop, or a custom number of pixels.
- Select Load page. The page appears in the frame at that exact width so you can see how the layout reflows.
- Switch widths to test mobile breakpoints, tablet layouts, and full desktop side by side without resizing your own window.
How it works
The viewer places the target page inside an iframe and sets the frame to a fixed pixel width. The page inside reads that width the same way a real device would, so its media queries and responsive rules respond exactly as they would on a screen of that size. The frame scrolls inside its own area, so even a 1280px desktop view fits on a small screen of your own. Nothing about the page is changed or downloaded by this site; your browser requests it directly.
Why some sites refuse to load
Many large sites block being shown inside a frame for security reasons. They send an X-Frame-Options header or a Content-Security-Policy with a frame-ancestors rule, which tells the browser not to render them inside another page. When that happens the frame stays blank or shows a refusal message, and there is no client-side way around it because the protection is enforced by the browser itself. Sites you control, staging environments, and pages that allow framing will load fine. For blocked sites, use the Open in new tab button and resize your browser, or test on the page's own domain.
A real example
Say you built a landing page and want to confirm the navigation collapses into a menu under 768px. Load the page at the Tablet 768 width and the menu should still be full; switch to Mobile 375 and the menu should collapse. If it does not change between those two widths, your breakpoint is set wrong. Set a Custom width of 600 to find the exact pixel where the layout switches.
Common questions
Why is the frame blank after I load a site?
That site most likely blocks framing with an X-Frame-Options or Content-Security-Policy header. This is a browser-enforced rule that cannot be bypassed from a static page. Use Open in new tab instead, or test a page that permits framing.
Is this a real device emulator?
No. It sets the frame to a device width so responsive layouts react correctly, but it does not change the user agent, touch behavior, or pixel density. For deep device testing use your browser developer tools, but this is a fast way to eyeball breakpoints.
Does the URL get sent to your server?
No. There is no server involved. Your own browser fetches the page directly into the frame, exactly as if you typed the address in the address bar.
Can I test a page on my own computer?
Yes, if it is served over a local address such as http://localhost:3000 you can paste that in. A plain file:// path usually will not load inside a frame.
What widths should I test?
375px covers most modern phones, 768px is a common tablet portrait width, and 1280px represents a typical laptop. Use the custom field to check the exact pixel where your design changes.