Mobile view tester
See how a page looks on a phone, tablet, laptop and desktop at once — real device widths picked from grouped dropdowns, rotate, zoom to fit, a drag-resizable custom size and a breakpoint readout. Load a URL, paste HTML or open a local .html file, and save a PNG screenshot of any device screen. Runs entirely in your browser.
Open Mobile view tester →What is the mobile view tester?
A responsive-design preview that shows one page at several real device widths side by side — phones from 320 px up, iPads, a Surface, and 1280 / 1440 / 1920 px screens. Every control sits in a settings column beside the stage: pick devices from grouped dropdowns, rotate them, zoom to fit, or drag a custom size to hunt for the width where your layout breaks. Every frame carries a readout of the Tailwind and Bootstrap breakpoint band it falls in, and a camera button on each frame saves the screen as a PNG at its true size. You can point it at a URL, paste HTML, or open a local .html file; the paste and file modes need no internet at all, and nothing you load is ever uploaded. In URL mode your browser loads the address directly — nothing passes through us. Many public sites refuse to be embedded (X-Frame-Options / CSP); if a frame stays blank, use the Paste HTML tab instead.
How to use Mobile view tester
- Choose a source — At the top of the settings column, pick URL, Paste HTML or HTML file. Type an address and press Load — your browser fetches it directly. On Paste HTML, drop in a document and press Render. On HTML file, pick a .html file from your disk; it is read locally.
- Pick your devices — Open the Phones, Tablets or Laptops & desktops dropdown and tick the devices you want; each option shows its CSS width. Ticked devices appear side by side on the stage and as chips under the dropdowns, where × removes one.
- Rotate and zoom — Rotate swaps width and height on every frame. Zoom set to Fit shrinks the row so all of it is visible; the layout still sees the true device width, because only the picture is scaled. The stage header shows the orientation, how many frames are up and the current scale.
- Find the breaking width — Set a width and height under Custom size and press Add custom frame, then drag the round handle at the corner of that frame. The width and height update live, along with the Tailwind and Bootstrap band underneath — so you can see exactly where the design changes.
- Save a screenshot — Press the camera on a frame to save that screen as a PNG at the device's exact CSS size, with the bezel and notch included when Device frame is on. Shoot all saves one image per frame in a single zip. Screenshots work for pasted HTML and HTML files; a page loaded by URL cannot be captured, because the browser keeps another site's pixels hidden from this page.
Frequently asked questions
Why is the frame blank when I load a URL?
Most public sites send X-Frame-Options or a Content-Security-Policy frame-ancestors header that forbids being embedded in another page, and nothing can work around that from inside a browser. A separate window is not a frame, though: press the window button on the frame's caption and the address opens in a popup sized exactly like that device, so the site's media queries respond the same way. For a site you own, allow the tester in its policy with frame-ancestors 'self' https://office.caspiantools.com. Otherwise use the Paste HTML tab or open the file from disk.
Can it show my localhost dev server?
Yes — type http://localhost:5173 (or whichever port) on the URL tab; localhost is the one plain-http address a browser will frame inside this https page. A LAN address such as http://192.168.1.20:5173 is blocked as mixed content, so for those use the window button on a frame: it opens the address in a popup of the device's size, which is not subject to that rule.
Why can't I screenshot a page loaded by URL?
A page loaded by URL belongs to another site, and the browser keeps its pixels and its document hidden from this page, so there is no client-side way to capture it. Pasted HTML and local files are rendered inside our own frame, which is why the camera works for them. Paste the page's HTML to capture it.
Why does the screenshot differ from what the frame shows?
The capture renders your markup again at the device's true size with scripts switched off, so a page that builds itself with JavaScript comes out empty, and images from other sites only appear when their server allows cross-origin use. Inline your CSS and keep the page self-contained for a faithful capture.
Is this the same as a real device?
No, and it does not pretend to be. It reproduces the CSS viewport size, which is what your media queries respond to, so layout problems show up faithfully. It cannot reproduce a device's pixel density, touch behaviour, native fonts or browser chrome — check those on a real phone.
Does my page get uploaded anywhere?
No. Pasted HTML and picked files never leave your browser, and there is no server on our side to send them to. In URL mode your browser loads the address itself, exactly as if you had typed it into the address bar.
Why does my pasted page look unstyled?
Pasted markup is rendered in a sandboxed frame with no base address, so relative paths like css/site.css have nothing to resolve against. Inline your CSS in a style tag, or reference absolute URLs.
Is my setup remembered?
Yes. The URL, the selected devices, orientation, zoom and your custom size are stored in your browser on this device. Pasted HTML is kept too, unless it is very large.
Tips
- Start with a phone, a tablet and a laptop selected at once — most layout bugs are visible the moment the three sit next to each other.
- 320 px wide is the narrowest screen still worth supporting; if it survives Small Android, it will survive anything.
- Turn the device frame off when you want more of the page on screen — the bezels cost real height at Fit zoom.
- Drag the custom frame slowly through 640, 768 and 1024 px to catch layouts that jump awkwardly right at a breakpoint.
- Shoot all gives you one PNG per device in a zip — handy for a design review or a pull request.
- Reload re-requests the page in every frame at once, which is quicker than reloading a browser tab per size.