Device Simulator

The Device Simulator lets you enter a web address and shows that page inside a fixed-size 'viewport frame', so you can get a rough idea of how it lays out at phone, tablet and desktop widths. The mechanism is simple: the page embeds an iframe set to a common iPhone, iPad or desktop viewport size, then scales the whole thing down to fit. Be clear about what it isn't: it's not a real phone emulator, it doesn't change the browser's User-Agent, doesn't simulate touch and doesn't simulate device pixel ratio. Many sites also forbid being embedded and will show up blank.

How to use

1. Type an address into 'Enter the URL to preview', for example qgjtools.com. If you leave off http:// or https://, the tool adds https:// in front automatically.
2. Click the 'Preview' button on the right, or press Enter in the input box.
3. Under 'Choose a device viewport size', click a preset: iPhone (Portrait) 390×844, iPhone (Landscape) 844×390, iPad 820×1180, Desktop (Small) 1280×800 or Desktop (Large) 1920×1080. The selected button turns dark.
4. A preview frame with a dark border appears below with your page inside. Switching presets resizes the frame immediately, with no need to re-enter the address.
5. To look at a different site, change the text in the input and click 'Preview' again.

How the frame is scaled

The preview frame's maximum display width is fixed at 380 pixels. If a device viewport is wider than that, the whole frame is scaled down proportionally. Using the code's formula (scale = 380 ÷ viewport width, capped at 1), the iPhone portrait preset comes out at about 0.97, iPhone landscape about 0.45, iPad about 0.46, Desktop (Small) about 0.30 and Desktop (Large) about 0.20. What matters is that the page inside still sees a genuine 390, 844, 820, 1280 or 1920-pixel-wide viewport, so responsive layouts and media queries respond to those widths. The picture is just shrunk, so text gets very small, especially with Desktop (Large). Use it to judge the overall layout, not font sharpness.

Supported range and known limits

• Five fixed presets. You can't enter a custom width and height, and there's no rotate button (landscape is its own preset).
• This is not device emulation: no User-Agent spoofing, touch events, device pixel ratio, system status bar or browser toolbar. If a site decides what to serve by detecting a mobile browser, you may still get the desktop version here, merely constrained to a narrower width.
• Many sites (banks, social platforms, many login-based services) block being embedded in other pages through security policies such as X-Frame-Options or CSP, and they will show a blank area or fail to load. The note at the bottom of the page says the same: it's a restriction set by the site itself, and the tool can't get around it.
• If this page is served over https but you enter an address that only works over http://, the browser generally blocks that mixed content and you'll get a blank frame. Try the site's https address instead.
• There's no failure message. When the frame is blank, the tool can't tell whether the site forbids embedding, the address doesn't exist or the network is down.
• Clicking 'Preview' with exactly the same address as before doesn't reload the page, because nothing changed. To force a refresh, edit one character and change it back.
• The embedded site is requested by your own browser, so login state and interactions may differ from what you see in a normal tab, and features that need popups or to break out of a frame may not work.
• No history is kept. Reloading the page resets the address and selected preset.

FAQ: Why is the preview blank?

The most common reason is that the target site refuses to be embedded in an iframe. Others are a mistyped address, an http-only site being blocked by the browser, or a very slow site. Open the address in a new browser tab first to confirm it works; if it does, the problem is almost certainly the site's embedding restriction, and this tool can't preview such sites.

FAQ: Can it replace testing on a real device?

No. It helps you quickly check whether the layout breaks at different widths or gets a horizontal scrollbar, which suits early checks during development. Touch interaction, mobile address-bar behavior, the on-screen keyboard, font rendering on different systems and notch safe areas all need a real device or the fuller device mode in your browser's developer tools.

FAQ: Can I preview a local page that isn't online yet?

The input automatically adds https:// to addresses with no scheme, so something like localhost:3000 becomes https://localhost:3000, which probably won't open. You have to type the full http://localhost:3000 to avoid the rewrite. And because this page is normally served over https, the browser may block embedded http content, so local pages are usually not a good fit for this tool.

FAQ: Are the preset sizes accurate?

They're common viewport (CSS pixel) sizes, such as 390×844 for an iPhone. That's a typical value rather than the size of every iPhone model. You can check your own device's actual window size with the Device Info Detector tool.

Privacy and processing

The tool has no server of its own and doesn't record or upload the address you enter. Know this, though: after you click Preview, your own browser requests the target site directly and displays it, so that site sees the request just like a normal visit, including routine details such as your IP address, and it may run its own analytics scripts and cookies. Preview only sites you trust, and don't type sensitive passwords into an embedded page.