Developer

Viewport Resizer

Preview any http(s) page inside a fixed-width iframe with adjustable width and height — ideal for quick responsive checks. Includes a built-in offline demo and common device presets. Your browser loads URLs directly; DroidXP does not proxy pages — the same local-first idea as our APK Analyzer and APK String Extractor (files and URLs stay in your session, not uploaded for processing).

Ad placement — top banner
Presets (width × height)
Ad placement — mid rectangle

What is a viewport resizer?

Responsive layouts use CSS media queries, flexible grids, and viewport-relative units. A viewport resizer wraps a live page in an <iframe> with a chosen width and height so you can see how the same document reflows — similar in spirit to Chrome’s device toolbar, but in a simple web form you can bookmark or share.

Privacy: local-first, like our Android tools

DroidXP does not proxy your URL or render pages on our servers. Optional width, height, and the URL field may be remembered in your browser (localStorage) so you can pick up where you left off — clear site data for DroidXP if you want a clean slate. That mirrors how APK Analyzer and APK String Extractor keep APK bytes in-tab: convenient for you, not uploaded for us to process.

Why the frame can stay blank

Many sites send X-Frame-Options: DENY or SAMEORIGIN, or a Content-Security-Policy with frame-ancestors, to stop clickjacking. When that happens, the browser refuses to render the page inside another site’s iframe. That is expected — try your own staging URL, a static host, or use browser DevTools on the target origin instead.

Embedded demo

Load demo injects a tiny HTML page via srcdoc (no network). It uses a simple @media (max-width: 600px) rule so you can verify resizing without relying on an external host.

Limits vs. real devices

This tool does not change User-Agent, device pixel ratio, or touch events — only the iframe’s CSS layout width/height. Viewport units (100vh, dvh) and env(safe-area-inset-*) also behave differently inside a nested frame than on a physical phone. For faithful mobile emulation, use DevTools device mode or a real device lab.

How to use this tool

  1. Step 1: Click Load demo or enter an https:// URL and click Load URL.
  2. Step 2: Adjust width (slider or field), height, or use a preset; use Swap width ↔ height for landscape.
  3. Step 3: If embedding fails, use Open URL in tab and DevTools responsive mode on that tab.

Frequently Asked Questions

Does DroidXP proxy or mirror websites?

No. The iframe loads URLs directly in your browser. We do not fetch pages on your behalf.

Does DroidXP log or store the URLs I type?

There is no server-side logging from this tool for your URLs. Optional width, height, and URL field text may be stored in localStorage in your browser for convenience; clear site data to remove them.

Why do I get a mixed content or blocked error?

This page is served over HTTPS. Browsers block active mixed content (embedding insecure http:// in secure pages). Use https:// targets when possible.

Can I iframe any URL?

Only if the target allows framing. Banks, OAuth providers, and many apps forbid it. A blank frame usually means framing is denied — not a bug in this tool.

Does this replace Chrome DevTools?

No. DevTools gives device metrics, throttling, sensors, and UA overrides. This page is a lightweight, shareable viewport box for quick checks.

Are preset sizes exact device screens?

They are common reference dimensions, not vendor-certified. Real phones have notches, safe areas, and dynamic toolbars — your CSS should use flexible layouts, not a single magic width.

Why do 100vh, dvh, or safe-area not match my real phone?

This tool only sets the iframe’s box size. The visual viewport, nested frame, and lack of real device chrome mean CSS viewport units and safe-area env() values will not match hardware one-to-one.

Is local file:// or localhost supported?

You can try http://localhost:… or http://127.0.0.1:… from this HTTPS page depending on browser rules; some setups block or warn. Serving your dev site over HTTPS avoids many issues.

Can I sign in to third-party sites inside the iframe?

Often no — third-party cookies, SameSite rules, and anti-clickjacking policies break embedded logins. Use Open URL in a new tab and DevTools device mode for realistic auth flows.

Why swap width and height?

It approximates portrait ↔ landscape without separate presets. It does not rotate the device’s physical orientation API — only the box dimensions change.

Can I use this for production QA sign-off?

Use it for quick smoke tests. Formal QA should still include real devices, accessibility checks, and performance profiling — not iframe sizing alone.