Related Tools

See all ->
UI Snippets LibraryCopy-paste HTML, CSS & JS componentsAspect Ratio CalculatorWidth · Height · Social Media SizesMedia Queries GeneratorCSS · SCSS · Tailwind · JSFlexbox BuilderVisual layout editorCSS Grid BuilderVisual grid layout editorCSS Clamp() GeneratorFluid responsive typographyREM ↔ PX ConverterBase font size calculatorTailwind FormatterSort & group classes

Responsive Design Tester — Preview Any Website on Any Device

Updated May 14, 2026
Share & Support

What's included

Features

10 device presets — Mobile S 320px through Wide 2K 1920×1080 covering the full common viewport range
Shareable ?link= URLs — share a URL that auto-loads the preview with your target site pre-encoded
Portrait / Landscape orientation toggle — swaps width and height for any device preset instantly
Custom W×H input — enter any arbitrary viewport dimensions for non-standard screen sizes; define fluid sizes with our CSS Clamp Generator
Zoom controls — 25/50/75/100% quick presets, Fit-to-window auto-scale, and + / − fine controls
Breakpoint ruler — highlights 375/768/1024/1280/1440px breakpoint markers along the frame edge; build the responsive grid behind your layout with our CSS Grid Builder
Canvas background options — Dots, Grid, Dark, Light for different review contexts
Viewport dimensions displayed below the preview frame for precise reference
X-Frame-Options block detection with clear error message and "Open in new tab" fallback link
100% free — no sign-up, no extension needed, works in any modern browser; sort Tailwind responsive classes with our Tailwind Formatter

About this tool

Preview Any Website at Any Device Width Instantly — Share the Preview URL with Your Team

Runs in your browser
No install or signup
Free forever

You need to verify that your site still looks right at 320px mobile and 1440px desktop — but resizing the browser window manually is slow, imprecise, and doesn't test real device widths. Paste the URL here, select a device, and see the exact viewport instantly without installing a browser extension or setting up any configuration. Works for any publicly accessible URL — staging environments, production sites, client websites, or competitor pages.

The tool loads any public URL inside an iframe constrained to the exact pixel dimensions of the selected preset. Mobile S (320×568) covers the smallest common smartphones. Mobile (390×844) targets iPhone 12/13/14. Mobile L (428×926) covers the iPhone Pro Max class. Tablet Portrait (768×1024) and Tablet Landscape (1024×768) test the standard iPad viewport. iPad Pro (1024×1366 portrait, 1366×1024 landscape) targets the large tablet class. Laptop (1280×800) represents the most common laptop resolution. Desktop (1440×900) targets wide laptop and external monitor configurations. Wide 2K (1920×1080) tests full HD displays. A Custom W×H input accepts any arbitrary dimensions for non-standard viewports. Click the orientation toggle to flip width and height for landscape testing. A breakpoint ruler marks standard CSS media query breakpoints along the frame edge.

A standout feature is shareable `?link=` URLs — when you preview a URL, the page address updates with the target site encoded as a query parameter. Copy that URL and share it in Slack, email, or a bug report, and your teammate opens the preview with the site already loaded — no re-entering the URL, no setup. The zoom controls (25/50/75/100% quick presets and an auto-fit button) let you see large desktop viewports on a smaller laptop screen without horizontal scrolling. Multiple canvas background options (Dots, Grid, Dark, Light) help you see the device frame clearly against different review contexts.

Step by step

How to Use

  1. 1
    Enter the URL to previewType or paste any publicly accessible website URL into the address bar at the top — include the full URL with the https:// prefix. Press Enter or click the Go button to load the site inside the preview frame.
  2. 2
    Select a device presetChoose a device from the presets to instantly resize the viewport — select Mobile S (320px) for the smallest mobile, Tablet Portrait (768×1024) for standard tablet, Desktop (1440×900) for laptop, or any other preset. Use Custom to enter arbitrary width and height values.
  3. 3
    Flip orientation if neededClick the Orientation toggle button to flip between portrait and landscape mode — the width and height swap so you can test how a tablet or large-phone layout responds when the device is rotated.
  4. 4
    Adjust zoom to fit your screenUse the zoom controls to scale the preview if the device viewport is wider than your browser window. Click 50% to see the full preview at half scale, or click Fit to automatically scale the preview to fill your available screen area.
  5. 5
    Share a pre-configured preview URLThe page URL updates to include ?link= with the encoded target URL whenever you preview. Copy that URL to share a pre-configured preview with any team member or client for instant feedback without any setup on their end.

Real-world uses

Common Use Cases

⬡
Jump between breakpoints instantly while building a responsive layout
Instead of manually dragging the browser window to approximate device widths, click a preset and see the exact layout at 320px, 375px, 768px, or 1440px. The breakpoint ruler marks the standard CSS breakpoints so you can verify that your media queries fire at the right dimensions. Build the underlying flex layout with our Flexbox Builder.
▦
Run a pre-launch QA pass across all device sizes before deploying
Systematically click through every device preset and verify that nothing overflows, wraps, or breaks at any viewport. The orientation flip checks tablet portrait and landscape. Share a ?link= URL with your QA team so everyone tests the same URL at the same device config without any setup.
◎
Show a client their site on mobile and desktop without them installing anything
Switch between mobile, tablet, and desktop presets in seconds during a screen-share or presentation. Share a ?link= URL so the client can explore device sizes independently in their own browser after the call — no browser extension, no additional tools.
⚙
Reproduce a layout bug at the exact viewport size a user reported
When a user reports "broken on my phone," load the URL and use the Custom W×H input to enter the exact reported dimensions. Screenshot the issue at the precise viewport and include the dimensions in the bug report for development to reproduce exactly.
≡
Verify a staging site matches the design spec at each breakpoint during handoff
Paste the staging URL, switch between the device sizes in your design file, and compare the rendered layout to the mockups. The zoom-to-fit option shows the full page layout at once for any device size without horizontal scrolling. Use our CSS Animation Generator to fine-tune any transition animations that differ from the mockup.
✦
Check a competitor site or client site across device sizes without installing anything
Preview any public URL at any device width — no extension, no devtools, no account. Bookmark ?link= URLs for competitor or client sites you check regularly to create a lightweight cross-device monitoring workflow.

Got questions?

Frequently Asked Questions

Responsive Preview Tool loads any publicly accessible website inside an iframe at exact device viewport pixel dimensions, letting you see how the site responds at different screen sizes without resizing your browser window. You can switch between 10 device presets covering mobile, tablet, and desktop widths, flip orientation between portrait and landscape, use a custom size input for non-standard viewports, and zoom the preview to fit your screen. When you preview a URL the page URL updates to include a ?link= parameter, so you can share the exact preview configuration with teammates or clients.

When you enter a URL and click Preview, the tool appends a ?link= query parameter to its own page URL encoding your target site's address. Anyone who opens that URL will see the target site immediately loaded in the preview at the default device size. You can also manually construct shareable URLs in the format /responsive-preview-tool?link=https://yoursite.com to create permanent bookmarks or share links in Slack, email, or design review documents for your team.

The tool includes 10 device presets: Mobile S (320×568), Mobile M (375×667), Mobile L (428×926), Tablet Portrait (768×1024), Tablet Landscape (1024×768), iPad Pro Portrait (1024×1366), iPad Pro Landscape (1366×1024), Laptop (1280×800), Desktop (1440×900), and Wide 2K (1920×1080). A Custom option lets you enter any arbitrary width and height values for non-standard viewport sizes that fall outside the preset list.

Many websites set the X-Frame-Options: DENY or SAMEORIGIN HTTP header, or use Content-Security-Policy: frame-ancestors 'none' to block being embedded in iframes as a protection against clickjacking attacks. If the tool detects this block, it shows an error message with a direct link to open the page in a new tab for manual inspection. Major sites like Google, Facebook, and most banking sites use this iframe protection by design.

Yes. Click the Portrait/Landscape toggle button in the controls bar to swap the width and height dimensions of the currently selected device preset. For example, iPad Pro Portrait (1024×1366) becomes 1366×1024 in landscape mode. This lets you quickly test how your responsive layout responds to device rotation on tablet and large-phone viewports, which is important for apps that support both orientations.

Use the 25/50/75/100% quick preset buttons to scale the preview to a fraction of its actual size — useful when the target device (e.g. 1920px wide) is wider than your browser window. The Fit button auto-calculates the exact zoom percentage needed to fill your available screen area with the full device preview at the current viewport dimensions. Use + and − buttons for fine-grained zoom adjustment between the standard presets.

No. The tool only controls the CSS viewport width — it does not simulate touch events, devicePixelRatio, media features like hover: none, or pointer: coarse. For full hardware simulation including touch events, high-DPI rendering, and mobile-specific CSS media features, use Chrome DevTools' Device Emulation mode or test on actual hardware. This tool is best for quickly checking layout and content reflow across a range of viewport widths.

To preview localhost URLs, open this tool in the same browser where your local server is running and type your localhost URL (e.g. http://localhost:3000) into the address bar. The browser can load local addresses in iframes if both origins are localhost. However, since this tool is served from a different origin, some browsers may block the cross-origin iframe for security reasons. If blocked, use Chrome DevTools' built-in Responsive Design Mode for localhost development testing.