Test Your Site on Any Screen Size
Instantly preview your website on desktops, laptops, tablets, and mobile phones. Open a real browser window using your selected dimensions to verify your responsive breakpoints.
Why Use a Resolution Simulator?
Mobile devices account for a large share of web traffic, making responsive testing important to ensure your site displays correctly across different screens.
The Multi-Device Reality
Your users will visit your website on a 4K desktop monitor, a 13-inch laptop, an iPad in portrait mode, and a small Android phone. A design that looks perfect on your development machine might have overlapping text, hidden menus, or broken images on other screens. This tool lets you instantly open your live site in a window sized to device-like dimensions to catch these layout concerns before your users do.
CSS Viewport vs. Physical Screen
Responsive design relies on CSS pixels (logical pixels), not physical hardware pixels. When you test a 375px wide iPhone viewport, you are testing how your CSS media queries (@media (max-width: 375px)) react. This tool requests the selected browser window dimensions, triggering layout shifts to verify how your site adapts.
Fast & Interactive
Unlike static screenshot tools, this simulator opens a real, live browser window. You can click menus, fill out forms, scroll through content, and test JavaScript interactions exactly as a real user would on that device size.
Screen Resolution Simulator
Common Device Resolutions & Breakpoints
The CSS viewport sizes that trigger standard responsive media queries.
| Device Type | Resolution (CSS px) | Aspect Ratio | CSS Breakpoint Context | Common Devices |
|---|---|---|---|---|
| Mobile | 360 × 640 | 16:9 | Base mobile styles. The smallest common viewport you should design for. | Android small/older phones, Galaxy Fold cover screen. |
| Mobile | 390 × 844 | ~19.5:9 | Standard modern mobile breakpoint (max-width: 480px). |
iPhone 12, 13, 14, Samsung Galaxy S21/S22. |
| Tablet | 768 × 1024 | 3:4 | Tablet portrait breakpoint (min-width: 768px). |
iPad Mini, standard Android tablets portrait. |
| Tablet | 1024 × 768 | 4:3 | Tablet landscape / small laptop breakpoint. | iPad landscape, older netbooks. |
| Laptop | 1366 × 768 | ~16:9 | Standard desktop/laptop breakpoint (min-width: 1024px). |
Common laptop viewport size. |
| Desktop | 1920 × 1080 | 16:9 | Full HD large screen breakpoint (min-width: 1440px). |
Standard 24" desktop monitors, premium laptops. |
| Desktop | 2560 × 1440 | 16:9 | QHD ultra-wide breakpoint. Tests max-width containers. | 27" gaming monitors, premium productivity displays. |
The Mechanics of Window Sizing
What happens when you click "Open Simulation Window".
URL Validation
What happens: The tool checks if your URL is valid and prepends https:// if missing.
Why it matters: Ensures the new window loads a valid web address instead of a blank error page.
Synchronous Window Open
What happens: window.open() is called immediately on your click event.
Why it matters: Browsers block pop-ups triggered by async code. Immediate execution bypasses most pop-up blockers.
Feature String Parsing
What happens: The browser parses width=X,height=Y,scrollbars=yes.
Why it matters: This instructs the OS window manager to request the selected outer dimensions for the new window.
Viewport Calculation
What happens: The browser subtracts its UI (tabs, address bar) from the height.
Why it matters: The actual CSS viewport height will be slightly less than the window height you requested. This is normal browser behavior.
CSS Breakpoints Trigger
What happens: Your website's CSS media queries evaluate the new viewport width.
Why it matters: This is the exact mechanism mobile devices use to switch to mobile layouts.
Live Interaction
What happens: You can scroll, click, and type in the new window.
Why it matters: Unlike static screenshots, you can test JavaScript, hover states, and form validations at that specific size.
Master Responsive Design Testing
A complete guide explaining how screen resolution simulators work, CSS breakpoints, responsive design practices, common layout issues to watch for, and how to test across multiple devices.
📘 Read Full Simulator Guide →Honest by Design — What This Tool Does and Doesn't Do
This tool opens a sized browser window. Here is exactly what it does and does not do:
- ✓ Opens a real browser window at requested pixel dimensions.
- ✓ Triggers your site's CSS media queries and responsive breakpoints for that viewport size.
- ✓ Allows full interaction (clicking, scrolling, form filling) at that size.
- ✓ Works with public URLs and local development servers (e.g., localhost).
- ✓ Does NOT emulate touch events (use Chrome DevTools for touch simulation).
- ✓ Does NOT change your browser's User-Agent string (sites will still see you as a desktop browser).
- ✓ Does NOT simulate hardware Device Pixel Ratio (Retina screens).
- ✓ Does NOT bypass your browser's pop-up blocker automatically (you must allow pop-ups).
This tool does
- Open windows at requested dimensions
- Trigger responsive CSS breakpoints for that viewport size
- Provide a range of device presets
- Allow custom width/height entry
- Load the live, interactive website
- Work on most modern desktop browsers that support JavaScript window opening
This tool does not
- Emulate mobile touch gestures
- Spoof mobile User-Agent strings
- Simulate hardware DPR / Retina
- Throttle network speed (3G/4G)
- Override browser pop-up blockers
- Require an account or API key
How to Use This Simulator
Steps to test your responsive design.
Enter URL
Paste the full URL of the website you want to test (e.g., https://example.com).
Select Device
Choose a preset mobile, tablet, or desktop resolution, or enter custom dimensions.
Click Simulate
A new browser window opens at the selected size. Allow pop-ups if prompted.
Test & Interact
Scroll, click menus, and test forms in the new window to verify your layout.
Common Simulator Issues and Fixes
Why the simulation might not work exactly as expected.
Pop-up Blocked
You click "Simulate" but no new window appears.
Fix: Your browser blocked the pop-up. Look for a blocked pop-up icon in your address bar (usually a small window with a red X) and select "Always allow pop-ups from this site". This tool requires pop-ups to function.
Window is Smaller Than Requested
You requested 4000px width but the window only opens at your screen's max width.
Reality: Browsers and operating systems will not let you open a window larger than your physical monitor. If you have a 1920px screen, the maximum window width is 1920px. Use Chrome DevTools device mode to simulate larger screens on smaller monitors.
Mobile Site Shows Desktop UI
You opened a 375px window, but the site still shows the desktop navigation menu.
Reality: Some websites use User-Agent sniffing instead of CSS media queries to decide whether to show the mobile site. Because this tool uses your real desktop browser, the site thinks you are on a desktop. Use Chrome DevTools to spoof a mobile User-Agent.
Images Look Blurry on Mobile Sizes
When simulating a 375px iPhone window, images look pixelated or blurry.
Reality: Real iPhones have a Device Pixel Ratio (DPR) of 3, meaning they download 3x sized images for a 375px CSS viewport. This tool opens a desktop window with a DPR of 1 or 2. To test Retina image sharpness, use Chrome DevTools and set the DPR to 3.
Hover Effects Don't Work Like Mobile
You are testing a mobile viewport, but hover states trigger when you move your mouse.
Reality: You are still using a desktop mouse. Mobile devices use touch, and CSS :hover behaves differently (or not at all) on touch screens. To test true touch behavior, use Chrome DevTools' touch emulation or test on a real physical device.
Viewport Height is Shorter Than Expected
You requested 800px height, but the website content area is only ~700px tall.
Reality: The height parameter sets the outer browser window size (including tabs, address bar, and bookmarks bar). The actual CSS viewport height will be 80-120px shorter. This is standard browser behavior.
Screen Simulator FAQs
Answers based on how browser window APIs and responsive design work.
Why does it open a new window instead of an iframe?
Many modern websites use X-Frame-Options or Content-Security-Policy headers to block themselves from being loaded inside iframes (to prevent clickjacking). Opening a new, independent browser window bypasses these restrictions and helps ensure the site loads correctly for testing.
Is this the same as Chrome DevTools Device Mode?
They serve similar purposes but work differently. Chrome DevTools emulates the device inside your current tab, allowing you to spoof User-Agents, emulate touch, and throttle networks. This tool opens a real, separate window at requested dimensions, which is useful for quick visual checks.
Why do I need to allow pop-ups?
Browsers block JavaScript from opening new windows unless it happens immediately in response to a user click. Because this tool functions by opening a new window for the simulation, you must whitelist our site in your browser's pop-up blocker settings.
Can I test my local development server (localhost)?
Yes. Because the simulation window opens in your own browser, it has full access to your local network. You can enter http://localhost:3000 or http://127.0.0.1:8080 and the simulator will open it.
What is the difference between Screen Resolution and Viewport?
Screen resolution refers to the physical display's pixel dimensions. A browser viewport is the CSS-pixel area available to web content. This simulator requests a browser window size, so the resulting viewport can be smaller than the requested window because of browser UI (such as tabs, borders, and the URL bar).
Will this tool slow down my computer?
No. The tool simply instructs your browser to open a new window. It uses browser resources similar to manually opening and resizing another browser window. There is no background processing or server-side rendering involved.
Can I test portrait vs landscape orientations?
Yes. Choose a preset where the height is larger than the width (e.g., 768 × 1024) for portrait, or where the width is larger (e.g., 1024 × 768) for landscape. Your CSS @media (orientation: portrait) queries will trigger accordingly.
Is my URL data stored or tracked?
The simulation happens entirely in your browser. The URL you enter is processed locally and is never sent to our servers. We only log anonymous, aggregated statistics of which resolution settings are selected to help us improve the tool. Your URLs remain completely private.