Developer Tools

Responsive Design Tester

Q: How do I test if my website is responsive?

Enter its address, press Test, and look at it on a phone, a tablet and a laptop side by side. Check that nothing overflows sideways, text stays readable and menus remain usable at every width.

Q: Can I test a site running on localhost?

Yes. Type localhost:3000 (or whichever port your dev server uses). Browsers allow a local page inside a secure page, so it works without any setup.

Q: Why is the frame blank or says “refused to connect”?

The site forbids being shown inside other pages with X-Frame-Options or a Content Security Policy. Many large sites do. Test your own site, a staging copy or a local build instead.

Q: 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.

Responsive Design Tester is part of Toolspire and is ready as soon as this page loads. 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.

Loads the page you enterFreeNo account

Page to test

Phones

Tablets

Laptops and desktops

Any other size

iPhone 15 / 16 393 × 852

Tailwind base · Bootstrap xs

iPad (9.7″) 768 × 1024

Tailwind md · Bootstrap md

Laptop 1366 × 768

Tailwind xl · Bootstrap xl

Shown at 30% of real size. Each frame is a real window of that width, so the page’s media queries respond exactly as they would on the device.

On this page

What you can do here

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.

The sequence

How to test a responsive design

1
Enter the address
Type the page’s address — example.com, or localhost:3000 for 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.

Worth knowing

Responsive Design Tester on Toolspire: 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 md in 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.

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

Questions about Responsive Design Tester

Where does Responsive Design Tester run?

Responsive Design Tester has to reach the network for a public lookup. The page says what leaves your device. Toolspire does not keep a copy of the query.

How do I test if my website is responsive?

Enter its address, press Test, and look at it on a phone, a tablet and a laptop side by side. Check that nothing overflows sideways, text stays readable and menus remain usable at every width.

Can I test a site running on localhost?

Yes. Type 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”?

The site forbids being shown inside other pages with 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?

At least a small phone (360–390 px), a tablet (768 px), a laptop (1366 px) and a large desktop (1920 px). Then drag in any width where your design has a breakpoint.

Is this the same as a real phone?

For layout, yes — the frame is a true viewport of that size. It does not reproduce touch, pixel density or a different browser engine, so finish with a check on a real device.

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?

No. Your browser loads the page directly from its own site, as if you had opened it in a tab. The address is remembered only in this tab so it is there next time.

Keep going

Pixel-Perfect Screen RulerNewPixel-Perfect Screen Ruler on Toolspire: Screen ruler: a real-size cm and inch ruler calibrated with a bank card.Developer Tools Bento Grid GeneratorNewBento Grid Generator on Toolspire: Draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.CSS Tools CSS to Tailwind ConverterNewCSS to Tailwind Converter on Toolspire. Convert CSS to Tailwind classes online: hover, media queries, dark mode and gradients become variants.Developer Tools Website SEO CheckerNewWebsite SEO Checker on Toolspire: Audit any page’s title, meta description, headings, canonical, robots.txt, schema, Open Graph and AI crawler access.SEO & Marketing Tools HTML to PDFNewConvert HTML code or an.html file to PDF with real, selectable text and clickable links. Choose A4 or Letter, margins and backgrounds. Free, without uploading.PDF Tools JSON Formatter & ValidatorNewJSON Formatter & Validator on Toolspire: Format, validate, minify and repair JSON online. Get the exact line and column of every error.Developer Tools

Open the full directory

Last updated 13 October 2026Report a problem or suggest a feature