See your site on many screens at once
A responsive website adapts its layout to the screen: one column on phones, more on tablets and desktops. The fastest way to spot problems is to look at several widths side by side. This responsive website tester loads your page in frames with the exact viewport sizes of common devices and scales them down to fit on your screen.
Screen sizes in the responsive website tester
| Device | Viewport (CSS pixels) |
|---|---|
| iPhone SE | 375 × 667 |
| iPhone 15 | 393 × 852 |
| Pixel 8 | 412 × 915 |
| iPad Mini | 768 × 1024 |
| iPad Pro 12.9" | 1024 × 1366 |
| Laptop | 1366 × 768 |
| Desktop (Full HD) | 1920 × 1080 |
Landscape mode swaps width and height for phones and tablets. Because each frame really has that viewport width, your CSS media queries respond exactly as they would on the device.
What to check
- Horizontal scrolling – content wider than the phone screen, often caused by fixed-width images, tables or long URLs.
- Navigation – does the menu collapse into a usable mobile menu?
- Text size and line length – readable on phones without zooming, not overly long lines on desktops.
- Tap targets – buttons and links large enough and far enough apart for fingers.
- Images – scaling correctly and not cropped awkwardly at tablet widths.
- Breakpoint transitions – layouts that look fine on phones and desktops sometimes break in between, around 768–1024 pixels.
Zoom levels
By default each device frame is scaled to fit comfortably on screen. Choose 25, 50, 75 or 100% to see all frames at the same scale, which makes it easier to compare how much content fits above the fold on each device.
Limitations
- Sites that forbid framing – many sites (including big platforms and banking sites) send
X-Frame-Optionsor a CSPframe-ancestorsrule. Their frames stay blank; that is a security setting of the site, not an error in your layout. - Not a device emulator – the frames use your desktop browser's engine and user agent. Sites that detect devices by user agent, touch-only behavior and iOS Safari quirks are not reproduced. Check important pages on real devices or with your browser's device emulation too.
- Local sites – a development server on
localhostcan be previewed on your own computer, but only with the http or https scheme.
Make sure your pages include the viewport meta tag, which the meta tag generator adds by default. Building a page from scratch? Iterate on it in the online HTML editor.