Mobile view tester
See how a page looks on a phone, tablet, laptop and desktop at once — real device widths, 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 scan the QR code to open the same address on a real phone. 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. Pick the devices you care about, 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. 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.
How to use Mobile view tester
- Choose a source — On the URL tab, 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 — Tap the device chips to add or remove frames. Selected devices appear side by side in the stage, each labelled with its CSS width and height.
- 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.
- Find the breaking width — Turn on the Custom chip, 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.
- Check it on a real phone — In URL mode, scan the QR code to open the same address on your phone. Use your machine's LAN address rather than localhost, so the phone can reach your computer.
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. Nothing can work around that from inside a browser. Your own site in development usually has no such header; if the site you want does, use the Paste HTML tab or open it on a phone with the QR code.
Can it show my localhost dev server?
In the browser on the same computer, yes — type http://localhost:5173 (or whichever port). On a phone, no: localhost there means the phone itself. Start your dev server on the network — Vite's --host flag, for example — and use your machine's LAN address, such as http://192.168.1.20:5173.
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 — that is why the QR code is there.
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.
- Reload frames re-requests the page in every frame at once, which is quicker than reloading a browser tab per size.