Responsive Design Tester: Preview Mobile, Tablet & Desktop Viewports

Enter a URL, choose a preset CSS viewport or custom width and height, then inspect the page in an iframe. This tool checks layout behavior at selected sizes; it does not emulate a physical device.

Some websites block iframe loading with security headers such as X-Frame-Options or Content-Security-Policy. A narrow browser window can also limit the visible preview area.

Device Presets

Custom Size

Current Size:

Responsive Testing Checklist

Use this short checklist after each viewport change. It helps you find layout problems without treating one preview size as proof that every device works.

  1. Load a page with real content, then confirm the header, main content and primary action are visible.
  2. Test a narrow phone, a larger phone, a tablet, a desktop width and one landscape or short-height case.
  3. Test just below and above each content-driven CSS breakpoint, then compare the layout change.
  4. Check for horizontal overflow, clipped text, unusable navigation, form problems and media that does not scale.
  5. Repeat touch, browser-specific, zoom and throttled-network checks in a real browser or device lab.
  6. Record the viewport size, browser and result so a later fix can be reproduced.

For a longer debugging workflow, read the responsive debugging checklist and viewport basics.

Responsive Design Tips

What this tester can and cannot show

This tool changes the iframe's CSS width and height so you can inspect layout changes at selected viewport sizes. It does not reproduce a physical device's device pixel ratio, touch input, browser UI, user agent, or network conditions. Confirm touch and device-specific behavior on real hardware or a dedicated device lab.

Viewport widths to test

  • Small CSS viewport examples: 320px, 360px, 375px, 390px, 428px
  • Tablet CSS viewport examples: 768px, 820px, 834px, 1024px
  • Desktop CSS viewport examples: 1280px, 1366px, 1440px
  • Wide CSS viewport examples: 1536px and above

Testing Tips

  • Test with real content instead of placeholders to ensure layouts handle various content lengths
  • Check that navigation menus are usable on small screens
  • Ensure form elements are usable and easy to fill out on all devices
  • Confirm touch interactions on a real touch device; this preview does not provide touch input
  • Check that images and media scale correctly
  • Use browser developer tools to throttle the network when you need to test loading behavior; this preview does not emulate network conditions
  • Verify font readability by ensuring text size and line height remain legible on the smallest mobile screens
  • Compare just below and above each content-driven breakpoint to confirm the layout changes where expected

Frequently Asked Questions

Why can't some websites load in the tester?

Many websites set X-Frame-Options or Content-Security-Policy headers for security reasons, which prevent them from being loaded in iframes. This is a security measure to prevent clickjacking and other attacks. For these websites, you may need to use browser developer tools or other methods for testing.

How does the website in the tester differ from real devices?

This tester previews CSS viewport sizes but cannot fully replicate all features of real devices, such as touch interactions, device pixel ratios, or specific browser behaviors. For final testing, verify your designs on actual devices.

How can I test specific media query breakpoints?

Use the custom size feature to input your media query breakpoint values. For example, if you have a breakpoint at 768px width, you can input 767px and 768px to test layouts on both sides of the breakpoint.

Related Resources