How do I see what my website looks like at different screen sizes?
Enter the page's full address, starting with https://, and click Load. The tester opens it in four frames at once: a 375 × 667 phone, a 768 × 1024 tablet, a 1366 × 768 laptop and a 1920 × 1080 desktop. Each frame is scaled down to fit your screen, but the page inside lays itself out as if the window really were that size.
The four preset sizes
| Preview | Viewport (CSS px) | Roughly matches |
|---|---|---|
| Mobile | 375 × 667 | Smaller iPhones such as the iPhone SE (2nd and 3rd generation) |
| Tablet | 768 × 1024 | A classic iPad in portrait |
| Laptop | 1366 × 768 | A very common budget laptop screen |
| Desktop | 1920 × 1080 | A Full HD monitor |
These are viewport sizes in CSS pixels, not the hardware resolution of a device. A modern phone with a 1170-pixel-wide panel still lays pages out at around 390 CSS pixels wide, because its device pixel ratio is 3. That's why 375 is a realistic phone width and the physical resolution isn't.
Step by step
- Copy the address of the page you want to check, including
https://. - Paste it into the box and click Load. Typing
example.comalone gives the error "Enter a full URL starting with https://.", and a plainhttp://address is refused with a note explaining why (see below). - Scroll inside any preview to see the rest of that page. Links and buttons inside the frames work.
- Resize your browser window if the previews are too small; they rescale automatically.
What the previews do and don't simulate
Inside each frame the page sees a window of exactly the preset width and height. Width-based CSS media queries, flexbox and grid wrapping, and vw/vh units behave as they would on a device of that size. That covers most responsive-layout bugs: overlapping columns, text that doesn't wrap, a navigation bar that never collapses into a menu.
It's a frame in a desktop browser, so several things stay as they are on your computer:
- User agent. Sites that serve a different mobile page based on the browser's identity will still send the desktop one.
- Touch and hover. Media queries like
(hover: hover)and(pointer: coarse)report your mouse, not a finger. - Pixel density. Images chosen with
srcsetare picked for your screen's density, not a phone's. - The viewport meta tag. On a real phone, a page without
<meta name="viewport" content="width=device-width">is laid out at a wide default width and shrunk to fit, so text looks tiny. Inside a frame the tag is irrelevant, and the page can look perfect here while still being broken on a phone. MDN's viewport meta tag guide explains the difference. If your page is missing the tag, the meta tag generator can produce the markup.
For final checks, your browser's device toolbar in developer tools or a real phone is still worth the extra minute.
When a preview stays blank
| Symptom | Cause | What you can do |
|---|---|---|
| All four frames empty, or a "refused to connect" message | The site sends X-Frame-Options or a CSP frame-ancestors rule |
Nothing from here. Use developer tools' device mode instead. Many large sites do this to prevent clickjacking. |
"Use the https:// address" error for an http:// URL |
Browsers block mixed content, so an http page can't load inside this HTTPS page | Use the site's https:// address (http://localhost is allowed for local testing) |
| "Enter a full URL..." error | Missing https:// |
Add the scheme |
| Page loads but shows you logged out | Cookies in a cross-site frame are often restricted | Test public pages, or use developer tools for logged-in views |
If you own the site and want it previewable here, you'd need to allow framing, but think twice: the header protects your users from clickjacking, and it's better left on for pages with logins or forms.
Privacy
The URL never reaches our server. The tester sets it as the source of four frames, and your browser requests the page directly from the site, exactly as if you'd opened it in a tab (four times). The framed sites can't read anything on this page, because the browser keeps different origins apart.
To learn the CSS behind responsive layouts, the CSS lessons cover media queries and flexible layout. To find your own screen and viewport size, use What is my browser, and to eyeball a specific pixel size on screen, the pixel ruler helps.
Last updated