Responsive Design Tester
See one page on several screens at once — phones, tablets, laptops and desktops — each in a real window of that size, so your media queries respond exactly as they will on the device.
At a glance
- Shows one web page on up to six screen sizes at once, side by side — phones, tablets, laptops and desktops.
- Each preview is a real window of that width, so CSS media queries and container layouts respond exactly as on the device.
- Includes 18 common viewports, from the iPhone SE (375 × 667) to a QHD desktop (2560 × 1440), plus any custom size and rotation to landscape.
- Labels every frame with its Tailwind CSS and Bootstrap 5 breakpoint — an iPad at 768 px is
mdin both. - Works with localhost and local network addresses for sites still in development, and with pasted HTML when there is no address at all.
- Scales the frames to fit your screen, or shows them at 25% to 100% of real size.
- The page is loaded by your own browser straight from its site; nothing passes through our servers. Your last address and devices are remembered on your device only.
Step by step
How to test a responsive design
- 1
Enter the address
Type the page’s address —
example.com, orlocalhost:3000for a site on your computer — and press Test. - 2
Choose the screens
Tick the phones, tablets and desktops you want, or add your own size such as
390x844. - 3
Compare the layouts
Scroll and click inside each frame. Use the rotate button to check landscape.
- 4
Zoom
Keep Fit to see everything at once, or pick 50% or 100% to look closely.
Features
Everything you need, nothing you don’t
Side-by-side screens
A phone, a tablet and a laptop in one view — spot the layout that breaks without resizing a window.
Real viewports
Frames are true to width, not screenshots, so hover, scroll and menus work inside each one.
Breakpoint labels
See at a glance which Tailwind and Bootstrap breakpoint each screen falls in.
Localhost friendly
Point it at localhost:3000 and check your work before you deploy.
Paste HTML
No address yet? Paste a page with its styles and test that.
Shareable link
Copy a link that opens the tester on the same address.
Screen sizes included
Sizes are CSS viewports — what a media query measures — not the physical pixels of the display.
| Device | Viewport | Tailwind | Bootstrap |
|---|---|---|---|
| iPhone SE | 375 × 667 | base | xs |
| iPhone 13 / 14 | 390 × 844 | base | xs |
| iPhone 15 / 16 | 393 × 852 | base | xs |
| Galaxy S23 / S24 | 360 × 780 | base | xs |
| Pixel 7 / 8 | 412 × 915 | base | xs |
| iPad (9.7″) | 768 × 1024 | md | md |
| iPad Air | 820 × 1180 | md | md |
| iPad Pro 12.9″ | 1024 × 1366 | lg | lg |
| Laptop | 1366 × 768 | xl | xl |
| Full HD desktop | 1920 × 1080 | 2xl | xxl |
Tailwind and Bootstrap breakpoints
A breakpoint applies from its minimum width upwards. Below the first one, Tailwind applies the unprefixed (base) styles and Bootstrap its xs tier.
| Breakpoint | Tailwind CSS | Bootstrap 5 |
|---|---|---|
| sm | 640 px | 576 px |
| md | 768 px | 768 px |
| lg | 1024 px | 992 px |
| xl | 1280 px | 1200 px |
| 2xl / xxl | 1536 px | 1400 px |
Why some sites stay blank
A site can tell browsers not to display it inside another page, using the X-Frame-Options header or a frame-ancestors rule in its Content Security Policy. Google, Facebook, banks and many others do this to prevent clickjacking, and no in-browser tester can get around it.
Your own site usually has no such rule, so it works. If yours does, test a staging copy without the header, or run the site locally and enter its localhost address.
What this test shows — and what it does not
- It shows how the layout responds to width and height: media queries, flexbox and grid changes, hidden menus, overflowing text and images.
- It does not emulate touch input, the device’s pixel density, or a mobile browser’s user agent — the page is still drawn by the browser you are using.
- For the last word on a real phone — Safari’s toolbar, the notch, keyboard behaviour — check on the device itself.
- An http address cannot be shown inside this https page, except
localhost. Use the https address.
FAQ
Frequently asked questions
How do I test if my website is responsive?
Can I test a site running on localhost?
localhost:3000 (or whichever port your dev server uses). Browsers allow a local page inside a secure page, so it works without any setup.Why is the frame blank or says “refused to connect”?
X-Frame-Options or a Content Security Policy. Many large sites do. Test your own site, a staging copy or a local build instead.What screen sizes should I test?
Is this the same as a real phone?
What are the Tailwind breakpoints?
sm 640 px, md 768 px, lg 1024 px, xl 1280 px and 2xl 1536 px. Each applies from that width upwards.Is the address I enter sent to you?
Keep going
Related tools
Pixel-Perfect Screen Ruler
Free online screen ruler: a real-size cm and inch ruler calibrated with a bank card, plus pixel-perfect measuring of screenshots with zoom and smart edges.
CSS to Tailwind Converter
Convert CSS to Tailwind classes online: hover, media queries, dark mode and gradients become variants, colours match the palette. Tailwind v4 and v3, free.
Website SEO Checker
Free website SEO checker: audit any page’s title, meta description, headings, canonical, robots.txt, schema, Open Graph and AI crawler access, with fixes.
HTML to PDF
Convert HTML code or an .html file to PDF with real, selectable text and clickable links. Choose A4 or Letter, margins and backgrounds. Free, no upload.
Image Resizer
Resize JPG, PNG and WebP images by pixels, percentage or social media presets. Crop to fill or fit, batch resize and download a ZIP — no upload needed.
JSON Formatter & Validator
Format, validate, minify and repair JSON online. Get the exact line and column of every error, a collapsible tree view and sorted keys — private, in-browser.
Last updated Report a problem or suggest a feature