Tools /  Viewport Simulator

Viewport Simulator

ビューポート模擬
検証済TESTED
URL
SIMULATED SIZE
375×667
CURRENT VIEWPORT
·
Honest limits: many sites send X-Frame-Options or CSP headers and will simply refuse to render inside a frame; if a page comes up blank, that's why. Your own local dev server (e.g. http://localhost:3000) usually works best. This simulates CSS viewport size only, not real device pixel ratio, touch input, or mobile browser UI.

The frame is sandboxed and everything loads directly from your browser; nothing is proxied through a server.

How it works

仕組み

This simulator frames any URL at an exact CSS viewport size (iPhone SE, iPhone 15, Pixel 8, iPad, a small laptop, or any custom width and height), so you can eyeball breakpoints without reaching for another device. It also reads your browser’s own current inner viewport live as you resize the window. Two limits worth knowing: it renders inside a sandboxed iframe, so sites that send X-Frame-Options or CSP frame-ancestors headers will refuse to appear (your own local dev server is the ideal test subject), and it simulates layout width, not device pixel ratio or touch.

Why does the frame stay blank for some websites?

Most large sites send an X-Frame-Options or Content-Security-Policy header telling browsers not to embed them, and the browser silently refuses. That’s a security feature, not a bug in the tool. Pages you control, especially localhost dev servers, normally embed fine.

Is this the same as my browser’s device toolbar in DevTools?

It covers the same core job: previewing CSS breakpoints at a fixed size. DevTools adds user-agent spoofing, device-pixel-ratio emulation, and touch simulation, so use it for deeper testing. This tool is handy for quick side-by-side checks without opening an inspector.

Why do real phones still look different from the simulation?

Physical devices have their own pixel density, font rendering, scrollbar behavior, and browser chrome that shrinks the visible viewport; an iPhone’s toolbar can eat over 100px of height. Treat the simulator as a fast first pass and confirm on real hardware before shipping.

More on the bench 他の道具
Regex Tester
CSS clamp() Calculator
Cron Expression Builder
Meta Tag Previewer
Shadow & Gradient Generator
Tab Order Visualizer
JSON Formatter
Diff Checker