Paste any URL and instantly see how your website looks on 20 real iPhone, Android, Windows and Mac screen sizes — no installs, no signup.
Note: some websites send an X-Frame-Options header that blocks embedding. If a preview stays blank, that's the site refusing to load here — use "Open in new tab" instead. Full explanation below.
This responsive design checker loads your live site inside an iframe sized to the exact CSS viewport of a real device, so what you see is genuine rendering — not a screenshot or a mock-up. Three steps:
A responsive design checker is a browser tool that renders your website at the precise viewport widths real devices use, so you can find layout problems without owning every phone. Instead of dragging your browser window and guessing, you get accurate widths — 393px for an iPhone 15 Pro, 412px for a Galaxy S24 Ultra, 1366px for a common Windows laptop.
That accuracy matters because CSS media queries fire at specific pixel widths. A layout that looks fine at 400px can collapse at 393px if a breakpoint sits between them.
If you came here looking for Google's old checker, it no longer exists. Google retired the Mobile-Friendly Test tool, its API, and the Search Console Mobile Usability report on 1 December 2023, pointing site owners to Lighthouse instead.
Google was clear that this doesn't make mobile usability less important — it remains part of page experience guidance, and mobile-first indexing means Google reads the mobile version of your page to decide how you rank. What went away was the single yes/no verdict, not the requirement.
There is no one-for-one replacement. Different tools now answer different questions:
| Tool | What it answers | When to use it |
|---|---|---|
| This checker | Does my layout break at real device widths? | While designing and after every change |
| Lighthouse (Chrome DevTools) | Performance, accessibility, SEO and best-practice audit | Before launch, and for diagnosing scores |
| PageSpeed Insights | Lighthouse lab data plus real-world Chrome UX field data | When you need field data, not just lab results |
| Search Console | Core Web Vitals and indexing issues for your verified site | Ongoing monitoring of a live site |
Practical order: use this tool first to catch visual breakage in seconds, then run Lighthouse for the performance and accessibility side. Layout problems are faster to spot with your eyes than in an audit score.
Because the site you entered is refusing to be embedded. This is the single most common issue with every responsive checker, and it isn't a bug in the tool.
Websites can send an X-Frame-Options: DENY or SAMEORIGIN header, or a Content-Security-Policy frame-ancestors directive, telling browsers not to display them inside another page. It's an anti-clickjacking protection. Google, Facebook, X, most banks and many SaaS dashboards all set it.
You can't work around it from the browser, and any tool claiming otherwise is taking a screenshot on a server rather than rendering live. Your options:
These are CSS viewport widths, which is what your media queries actually respond to — not the marketing resolution on the spec sheet. A phone advertised as 1179×2556 pixels reports 393×852 CSS pixels to your stylesheet.
| Device | CSS viewport | Category |
|---|---|---|
| iPhone SE | 375 × 667 | Small phone — the width most likely to break layouts |
| iPhone 15 / 15 Pro | 390 × 844 / 393 × 852 | Standard phone |
| iPhone 15 Pro Max | 430 × 932 | Large phone |
| Galaxy S24 Ultra | 412 × 915 | Large Android |
| Google Pixel 8 | 412 × 892 | Standard Android |
| iPad Mini | 768 × 1024 | Small tablet — a classic breakpoint boundary |
| iPad Air | 820 × 1180 | Standard tablet |
| iPad Pro 12.9" | 1024 × 1366 | Large tablet |
| Windows laptop | 1366 × 768 | Still one of the most common desktop widths |
| MacBook Air 13" | 1280 × 800 | Small laptop |
| Desktop 1080p | 1920 × 1080 | Standard desktop monitor |
If you only have time to check four widths, check these — they catch most real-world breakage:
Running a mobile view test before you publish catches the issues that quietly cost conversions:
Being straight about this: a viewport preview is not identical to holding the phone. Here's what it does and doesn't cover.
| This preview tool | Real device | |
|---|---|---|
| Layout at exact widths | Accurate | Accurate |
| Media query behaviour | Accurate | Accurate |
| Touch and scroll feel | Not simulated | Real |
| Safari / mobile browser quirks | Uses your desktop engine | Real engine |
| Real load speed on 4G | No | Yes |
| Speed to test 20 sizes | Seconds | Impractical |
Use this tool for the fast feedback loop while you build. Do a final pass on at least one real iPhone and one real Android before launch, because Safari's rendering engine differs from Chrome's in ways no desktop preview reproduces.
Yes, completely. There's no signup, no test limit and no account. The preview runs in your own browser, so we never load or store the sites you test.
The site is sending an X-Frame-Options or CSP frame-ancestors header that blocks embedding — an anti-clickjacking protection. No browser-based tool can bypass it. Use "Open in new tab", or Chrome DevTools' device toolbar, which isn't affected.
Google retired it, along with the Mobile-Friendly Test API and the Search Console Mobile Usability report, on 1 December 2023. Google now points site owners to Lighthouse. Mobile usability still matters for rankings — only the standalone tool went away.
No. This shows you how your layout renders at real device widths. Google's retired tool gave a pass/fail verdict based on tap targets, font size and viewport configuration. For that side of things, run Lighthouse in Chrome DevTools alongside this preview.
Staging sites work if they're publicly reachable. A localhost URL won't load, because your browser resolves it against the machine running the page, not your dev server. Use Chrome DevTools' device toolbar for local work.
Start at 375px wide and work upward. Designing mobile-first means the tightest constraint is solved first, and widening a working layout is far easier than rescuing a desktop layout that collapses on a phone.
Yes. Google has used mobile-first indexing universally since 2024, meaning it crawls and ranks based on your page's mobile version. If content or links are missing or unusable on mobile, that's the version Google judges you on.
Phone specs quote physical pixels; CSS uses logical pixels. An iPhone 15 Pro has a 1179×2556 physical screen but reports 393×852 to your stylesheet, because it packs three device pixels into each CSS pixel. Media queries respond to the CSS value, which is what this tool uses.
Working on content for that page? Try our free word counter, or style your headings with the bold text generator. Browse everything on our free online tools page.