Responsive Screen & Multi-Viewport Tester

What is a Responsive Screen Tester?

A responsive site has to work on a 360 px phone, a 768 px tablet and a 1440 px desktop at the same time. Resizing your browser window back and forth is slow and misses problems. This tester loads a page in several device-sized frames side by side, so you can spot broken layouts, overflowing elements and awkward breakpoints at a glance.

How to use it

  1. Enter the URL of the page to test, such as your local dev server or a staging site.
  2. Choose the devices or viewport sizes to compare.
  3. Scroll and interact with each frame to check layout and behaviour.

Common viewport widths

  • 360 to 412 px: most Android phones.
  • 375 to 430 px: iPhones.
  • 768 to 834 px: tablets in portrait.
  • 1024 to 1366 px: tablets in landscape and small laptops.
  • 1440 to 1920 px: desktop monitors.

What to check

  • Horizontal scrolling on small screens, usually caused by fixed widths, long words or wide tables.
  • Touch targets at least about 44 × 44 px on mobile.
  • Navigation collapsing correctly into a menu.
  • Images scaling without distortion and using srcset for sharp output.
  • Text size at least 16 px for body text on phones.

Limitations

  • Frames simulate viewport width, not real devices: touch behaviour, the iOS Safari address bar and device fonts differ. Test on real phones before release.
  • Sites that send X-Frame-Options: DENY or a frame-ancestors CSP cannot be shown in frames. For those, use your browser's developer tools device mode.
  • Your page must include <meta name='viewport' content='width=device-width, initial-scale=1'> (with double quotes in real HTML) to behave responsively on phones.

Frequently Asked Questions

Why does a site not load in the tester?

The site sends headers such as X-Frame-Options or a CSP frame-ancestors rule that forbid embedding. Use browser developer tools instead.

Is this the same as testing on a real phone?

It simulates screen width but not touch input, device fonts or mobile browser quirks. Always test important pages on real devices too.

Which screen sizes should I test?

At least a small phone around 360 px, a tablet around 768 px and a desktop around 1440 px.

Why is my mobile layout zoomed out?

The page is probably missing the viewport meta tag with width=device-width.

You May Also Need