The professional viewport resizer for developers and designers. Drag any edge to a custom pixel width, snap to CSS breakpoints, and verify your responsive layouts in real-time — instantly.
Enter a URL, then drag the edges to test any breakpoint — or choose from 20+ device presets
Enter a URL and click Load
Loading preview…
Device simulators show fixed sizes. A viewport resizer lets you drag to any pixel — finding the exact point your layout breaks.
Over 63% of web traffic is mobile. Your CSS must hold up from 320px to 1920px — and dragging the viewport is the fastest way to verify it does.
Drag the handle until a layout element wraps, overflows, or collapses — you'll see the exact pixel width where a new media query is needed.
Spot text overflow, images exceeding container width, broken nav menus, and collapsed grids before your users ever see them.
No need to open browser developer tools. Just drag. The live dimension readout updates in real-time, making iteration as fast as clicking.
Built for frontend developers, UI designers, and QA engineers who demand precision
Grab the right or bottom handle to resize the preview window freely at any pixel dimension between 200px and 2560px.
The current width × height updates in real-time as you drag, so you always know the exact viewport size you're testing.
Enable snap guides to lock onto standard CSS breakpoints — 320, 375, 480, 768, 1024, 1280, and 1440px — with a visual flash indicator.
A pixel ruler above the preview marks every major CSS breakpoint as you resize, so you know exactly where your media queries fire.
Jump directly to exact device viewport sizes: iPhone 15, Samsung Galaxy S23, iPad Pro, and all standard desktop resolutions.
Swap width and height to simulate landscape vs portrait mode with a single click — essential for tablet and mobile layout testing.
No setup, no learning curve — just paste, load, and drag
Type or paste any live URL — including localhost or staging URLs — into the input bar and click Load.
Grab the right or bottom handle and drag to any width. Watch the dimension badge update live and the breakpoint ruler react.
Spot the layout issue, update your CSS, click refresh to reload, and drag back to confirm the fix. Repeat until pixel-perfect.
A Responsive Viewport Resizer is a browser-based tool that lets you interactively resize a website preview window to any pixel width and height. Unlike a device simulator — which shows your site in a fixed phone or tablet frame — a viewport resizer gives you continuous drag control so you can find the exact pixel at which your layout breaks.
This is especially useful when you're refining CSS breakpoints, checking that your @media queries fire at the right thresholds, and verifying that flexbox and CSS Grid layouts adapt correctly across the full spectrum of screen sizes. With this tool you can test everything from 320px compact mobile all the way up to 1920px widescreen desktop.
| Name | Width | Framework |
|---|---|---|
| xs / Small Mobile | 320px | — |
| Mobile | 375px | — |
| sm | 640px | Tailwind |
| md | 768px | Bootstrap / Tailwind |
| lg | 1024px | Bootstrap / Tailwind |
| xl | 1280px | Bootstrap / Tailwind |
| 2xl | 1440px | Tailwind |
| Full HD | 1920px | — |
Use this Viewport Resizer when you need to find the exact breakpoint pixel or test a range of widths continuously. Use a Device Simulator (like our Mobile Viewer) when you need to see your site in a realistic device frame — useful for client presentations and verifying device-specific features.
Websites that set X-Frame-Options: DENY or a restrictive Content-Security-Policy will block loading inside an iframe. This is a server-side security header on the target website, not a limitation of this tool. For sites you own, you can relax the frame-ancestors CSP directive during development.
Everything you need to know about the Responsive Viewport Resizer
A Responsive Viewport Resizer is a browser tool that lets you drag the edges of a website preview to resize it to any width or height. This gives you continuous, pixel-level control to test how your website layout responds at different screen sizes and find the exact pixel at which your CSS media queries need to fire.
Enter your URL and click Load, then drag the right edge of the preview window. The live dimension badge shows your current width in real-time. Enable Snap Guides to have the handle snap to common CSS breakpoints — 320, 375, 480, 768, 1024, 1280, and 1440px — with a visual highlight when you hit one. The breakpoint ruler above the frame also marks these thresholds visually.
Yes — 100% free with no registration, no paywall, and no premium tier. All features including drag-resize, snap guides, breakpoint ruler, device presets, and orientation toggle are available to everyone at no cost.
The snap guides cover seven standard breakpoints: 320px (small mobile), 375px (iPhone SE / common mobile), 480px (large mobile), 768px (Bootstrap / Tailwind md), 1024px (Bootstrap / Tailwind lg), 1280px (Tailwind xl), and 1440px (Tailwind 2xl).
Yes. You can load any URL including http://localhost:3000, a local IP like http://192.168.1.10:8080, or a private staging URL. The server just needs to be accessible from your browser's current network. Note that the server must not block iframe embedding via X-Frame-Options headers.
A device simulator (like our Mobile Viewer) shows your website inside a fixed-size, realistic device frame — great for client presentations and checking device-specific layouts at a glance. A viewport resizer gives you continuous drag control to freely move between any pixel dimension — better for developers who need to pinpoint the exact breakpoint where a layout fails. Both tools complement each other for complete responsive testing.
Some websites block loading inside iframes via the X-Frame-Options HTTP header (set to DENY or SAMEORIGIN) or via a restrictive Content-Security-Policy: frame-ancestors directive. This is a security setting on the target website's server — not a bug in this tool. For your own site, you can relax the frame-ancestors directive to * or your specific testing domain during development, then restore it for production.
Join developers and designers who use Mobile Viewer tools to build pixel-perfect responsive websites