Test how any webpage looks across 30+ device resolutions — phones, tablets, laptops, and desktops — with a live scaled preview.
This tool simulates how any webpage renders at different screen resolutions by loading the target URL inside an iframe set to the exact pixel dimensions of the selected device. The iframe is then CSS-scaled to fit your screen while preserving the true pixel layout — so CSS media queries, responsive breakpoints, JavaScript viewport events, and flexible grid layouts all behave exactly as they would on the real device.
https://yoursite.com) in the input boxAlways start responsive design testing at the smallest supported viewport — typically 375px (iPhone SE). Work upward through breakpoints to verify the layout expands correctly. Google uses mobile-first indexing, so the 375px viewport is what the Googlebot crawler renders for indexing and ranking purposes.
Test resolutions just below and just above each CSS media query breakpoint. For a breakpoint at 768px, test at 767px and 769px to catch any layout shifts or overflow issues at the transition point. These boundary values are where responsive bugs most commonly occur.
CSS media queries respond to viewport width, not physical screen resolution. An iPhone 14 has 1170 physical pixels wide but a CSS viewport of 390px (because its device pixel ratio is 3). Always use CSS pixel dimensions when testing responsive layouts — this simulator uses CSS pixels, which is the correct measurement for web design.
Many production websites (Google, Facebook, Twitter, major banks) set X-Frame-Options: SAMEORIGIN to prevent clickjacking. These sites cannot be previewed in iframe-based simulators. For these, use the Website Screenshot Generator which uses a headless browser to capture the page server-side, or use Chrome DevTools Device Mode.