Screen widths and what they show
A responsive check opens the same web page at phone, tablet and desktop widths side by side, so you can see at a glance that a menu which fits on a 1440 px laptop collapses into a button on a 390 px phone instead of spilling off the screen.
Responsive design has a lot of jargon. Here is the short version.
- Responsive design
- A layout that rearranges itself to fit the screen: columns stack, menus fold away and images shrink, instead of the visitor zooming and scrolling sideways.
- Viewport width
- How many CSS pixels wide the visible page is. Layouts change at these widths, not at a device name.
- Breakpoint
- A width where the layout switches, for example from three columns to one. Most problems hide just either side of a breakpoint.
- Phone, 390 px
- A common width for current phones held upright. Check that text is readable, buttons are easy to tap and nothing runs off the right edge.
- Tablet, 768 px
- A small tablet held upright, and the width where many sites switch from a phone layout to a desktop one. Awkward in-between layouts show up here.
- Desktop, 1440 px
- A typical laptop or desktop window. Look for over-stretched lines of text, tiny images in big boxes and empty space.
- Framing
- Showing one web page inside another. Many sites switch it off for security, which is why their previews stay blank here.
Sample addresses and what happens
What happens when you type different addresses into the box. Each row is a sample input with the tool’s response, so you know why some addresses are refused before you try them.
| You type | Result | Why |
|---|---|---|
| example.com | Previewed | Opens https://example.com/ at 390, 768, 1440 px |
| https://example.com/pricing | Previewed | Opens https://example.com/pricing at 390, 768, 1440 px |
| http://example.com | Refused | Only secure https:// addresses can be previewed. Try the same address with https://. |
| https://user:[email protected] | Refused | Remove the name and password from the address. Previews never sign in. |
| javascript:alert(1) | Refused | Only https:// website addresses can be previewed. |
| my site | Refused | That does not look like a website address. |
Why a preview can differ from a real device
Many big sites refuse to be framed
Banks, social networks, search engines and most large shops send a header that says “do not show me inside another page”. Their previews stay blank, and there is no way around that from a browser.
A narrow window is not a phone
The previews match the width, not the device. Touch, the on-screen keyboard, notches and phone browser bars can still change what a real visitor sees.
Pages behind a login show the login
Previews never sign in and never send forms, so a staging site behind a password or a members area shows its sign-in screen, or nothing.
Only secure addresses work
Plain http:// sites are refused, because this page is secure and browsers block insecure content inside it. Test the https:// version of the site instead.
Some features are switched off
For safety the previews cannot open pop-ups, submit forms or take over the page. Checkout flows and sign-up forms will not work inside them.
Questions about checking a site on every screen
Why is one of my previews blank?
The site has asked browsers not to show it inside other pages, which most large sites do. Your own sites usually work. If yours stays blank, check its security headers, or review it on real devices instead.
Does your server visit the site?
No. Your browser loads the site directly into the three previews, just as if you had opened it in a tab. Nothing is fetched or stored on our side, and the site does not see where you came from.
Why can’t I share a link to the preview?
On purpose. A shareable link that opens any site inside our page could be used to dress up a fake login page. You type the address yourself each time, and it is never put in the page link.
Which widths should I check before a launch?
The three here cover most visitors: a phone upright, a small tablet and a laptop. Then drag your own browser window slowly from narrow to wide, because layouts often break between the usual sizes.
Can I click around inside the previews?
Yes, links and scrolling work in each preview, and each one moves on its own. Forms and pop-ups are blocked for safety.
How is this different from the device mode in browser developer tools?
Developer tools show one width at a time and need a desktop browser. This shows three side by side, works on any device, and is simple enough to send to a client who just wants to look.