Viewport Size Simulator
Emulate device screen sizes visually in the browser. Test responsive designs across different viewport dimensions.
Website URL
Device & Size
Mobile
Tablet
Desktop
⚠️ Website Loading Limitations
Some websites may not load due to security restrictions that prevent embedding in iframes (X-Frame-Options, Content-Security-Policy). This is a browser security feature that cannot be bypassed. If you own the website you're testing, you can temporarily disable these headers during development to use this tool.
Preview
About Viewport Size Simulator
A viewport size simulator is an essential web development tool that allows developers to test and preview how their websites appear across different device screen sizes and resolutions. This tool emulates various device viewports including mobile phones, tablets, desktops, and custom dimensions, helping ensure optimal responsive design implementation without needing physical devices.
Why use a Viewport Size Simulator?
Using a viewport size simulator streamlines responsive design testing, saves time and resources by eliminating the need for multiple physical devices, and ensures consistent user experience across all screen sizes. It helps identify layout issues, optimize media queries, and validate that your responsive design works properly before deployment, ultimately improving website accessibility and user satisfaction.
Who is it for?
This tool is perfect for web developers creating responsive websites, UI/UX designers testing interface layouts across devices, quality assurance testers validating cross-device compatibility, and digital agencies ensuring client websites work seamlessly on all screen sizes. It's also valuable for anyone involved in web development who needs to verify responsive design functionality.
How to use the tool
Enter the website URL or load your local development site
Select from preset device dimensions or enter custom width and height values
Click simulate to view how your website appears in the selected viewport size
Test multiple device sizes to ensure your responsive design works correctly
Use the tool to identify and fix any layout issues across different screen dimensions
Frequently Asked Questions
How do I simulate different viewport sizes?
Enter a URL or load your local page. The tool renders the page at a chosen viewport size (common device presets: iPhone, iPad, Android phones, desktop sizes — or custom width/height). Useful for: testing responsive design, verifying breakpoints, debugging mobile-specific issues. Renders entirely in your browser via iframe sizing. Caveat: cross-origin sites may not load due to X-Frame-Options or CSP frame-ancestors restrictions (most major sites block iframe embedding for clickjacking protection).
Why test at different viewport sizes?
Responsive design adapts to screen size. Common breakpoints to test. **Mobile portrait**: 375x667 (iPhone SE), 390x844 (iPhone 14), 360x640 (small Android). **Mobile landscape**: 667x375 (iPhone). **Tablet**: 768x1024 (iPad), 810x1080 (iPad Pro). **Desktop**: 1280x720, 1440x900, 1920x1080. **Ultrawide**: 2560x1080. Verify: text remains readable, buttons remain tappable (44x44px minimum for mobile), images don't overflow, navigation works at all sizes. Real-device testing is the gold standard, but viewport simulation catches most layout issues.
Is my data sent to a server?
The viewport simulation itself runs entirely in your browser — the iframe size is just a CSS dimension change. However, the iframe LOADS the target URL from its actual server (your browser fetches the page directly). If the URL is yours, you control whether your server logs it. If you're testing a third-party site, that site's server sees your visit. No data is sent to our backend for simulation purposes.
What's the difference between CSS pixels and device pixels?
**CSS pixels** (the dimensions in media queries, `width: 100px`, viewport `width=device-width`): logical units, browser-defined. **Device pixels** (physical screen pixels): the actual hardware dots. The ratio is `devicePixelRatio` — for retina iPhone, devicePixelRatio = 3 (3 device pixels per CSS pixel). 'iPhone 14 is 390x844 CSS pixels' = 1170x2532 device pixels. CSS pixels are what you design with; device pixels are what the user actually sees rendered. The simulator uses CSS pixels (the design unit) — render quality on physical devices may look sharper due to higher device-pixel-ratio.
Can I test cross-origin sites?
Limited. Sites set `X-Frame-Options: SAMEORIGIN`, `X-Frame-Options: DENY`, or `Content-Security-Policy: frame-ancestors ...` headers to prevent embedding in iframes — a clickjacking-protection mechanism that virtually all major sites enable. Sites with these headers won't load in the simulator. Workaround: use your browser's built-in DevTools responsive mode (F12 > device toolbar) — works without iframe embedding. Or use desktop simulators (BrowserStack, Sauce Labs) that simulate full browsers on real OS. For testing your own sites, ensure your dev environment doesn't set restrictive frame-ancestors.
Is this a substitute for real-device testing?
**No** — viewport simulation reveals layout issues but misses many device-specific problems. Real devices differ in: touch handling (some hover effects don't translate), font rendering (subpixel differences), performance (low-end devices have less RAM and slower CPUs), browser engines (iOS Safari quirks differ from Chrome), keyboard handling (mobile keyboards take over half the viewport), gesture handling. For mission-critical mobile UX, test on real devices (or services like BrowserStack which provide real device access). Simulator + real-device testing together cover most issues.
What viewport breakpoints should I support?
Modern defaults (Tailwind/Bootstrap-inspired). **Mobile-first**: design for ~375px width (smallest common mobile), scale up. Common breakpoints: **sm: 640px** (large mobile), **md: 768px** (tablet portrait), **lg: 1024px** (tablet landscape / small desktop), **xl: 1280px** (desktop), **2xl: 1536px** (large desktop). Test below and above each breakpoint to verify the transition. For complex layouts (admin dashboards, complex forms), additional breakpoints (e.g., 1024-1280 'narrow desktop') may be useful. Avoid designing for one specific device — design for the breakpoint range.
How does the viewport meta tag interact?
The `<meta name='viewport' content='width=device-width, initial-scale=1'>` tag tells mobile browsers: 'the layout viewport equals the device's screen width; don't zoom out to fit a 980px desktop layout'. Without it, mobile browsers render the page assuming desktop and zoom out — broken responsive design. Required for any responsive site. Don't set `user-scalable=no` — it prevents users from pinch-zooming for accessibility. Verify your site has the correct viewport meta with [Meta Tag Generator](/tools/meta-tag-generator/).
Share This Tool
Found this tool helpful? Share it with others who might benefit from it!
💡 Help others discover useful tools! Sharing helps us keep these tools free and accessible to everyone.