Test whether a page is set up for mobile: viewport meta tag, width=device-width, responsive media queries and fixed-width layout warnings — the signals behind mobile-first indexing.
⚡ Interactive demo — sample data
This sample page has a viewport tag but is missing width=device-width and ships some fixed-width layout — it won't scale cleanly on phones.
Viewport meta tag: presentLooks good
width=device-width: not set — required for responsive scalingIssue
Responsive CSS (media queries): detectedLooks good
Fixed-width layout: large fixed px widths found — may overflow on mobileWarning
Verdict: mobile-friendliness needs work — fix the viewport setting firstWarning
Test whether a page is set up for mobile: viewport meta tag, width=device-width, responsive media queries and fixed-width layout warnings — the signals behind mobile-first indexing.
How it works
Enter your page URL
Paste any public URL and run the check. We fetch the page's HTML and look for the structural signals that decide whether a page renders properly on a phone — the same things a mobile crawler reads before it ever paints the page.
Review the mobile signals
You get a verdict on the viewport meta tag and its width=device-width setting, whether the page ships responsive CSS (media queries), and whether large fixed-pixel widths are present that tend to overflow small screens. Each signal is flagged with a plain reason.
Fix the gaps and re-run
Add or correct the viewport tag, add responsive breakpoints, and replace fixed widths with flexible units. Re-run to confirm the page now reports the core mobile signals search engines expect under mobile-first indexing.
What we check
Viewport meta tag — Confirms the page has a <meta name="viewport"> tag. Without it, mobile browsers assume a desktop-width canvas and shrink the whole page to fit, leaving text and tap targets tiny. This single tag is the foundation of every responsive layout.
width=device-width — Checks the viewport content sets width=device-width, which tells the browser to match the layout to the device's actual screen width instead of a fixed desktop width. Without it, a page with media queries still won't scale correctly on phones.
Responsive CSS (media queries) — Looks for media queries (min-width / max-width / @media) in the page, the mechanism responsive designs use to rearrange layout at different screen sizes. Their absence suggests a single fixed layout that doesn't adapt to small screens.
Fixed-width layout warnings — Scans for large fixed pixel widths (three digits or more) that commonly cause horizontal scrolling and content cut off the edge of a phone screen. Flexible widths and max-width are the mobile-safe alternative.
Real markup, not how it looks — The check reads the page's actual HTML and CSS signals rather than judging by appearance. A page can look acceptable in a desktop browser's narrow window yet still be missing the viewport tag that makes it behave correctly on a real device.
First-load HTML — Signals are read from the HTML as first delivered. If responsiveness is injected entirely by client-side scripts after load, a fast mobile crawler may not see it — so the check reflects what a bot reads on the initial request.
Common issues we catch
Missing viewport meta tag — The most common and most damaging mobile issue. Without it, phones render the page at a default desktop width and zoom out, so everything looks miniature and users must pinch and pan. Adding the tag is usually a one-line fix with an immediate effect.
Viewport tag present but without width=device-width — Some templates ship a viewport tag that omits or overrides width=device-width — for example by fixing the width to a number or disabling zoom. The page still doesn't scale to the device, so responsive CSS can't do its job.
Disabled zoom (user-scalable=no) — Locking zoom to stop users pinching is an accessibility problem — people who need to enlarge text can't. It also signals a layout that assumes one fixed size rather than adapting, which works against mobile-friendliness.
Fixed-pixel widths that overflow the screen — A container or image set to a large fixed width forces horizontal scrolling on phones and pushes content off the edge. Using percentage or max-width values lets the same element shrink to fit any screen.
No responsive breakpoints — A page built as a single fixed desktop layout with no media queries can't rearrange columns, menus or font sizes for small screens. It may technically display but feels cramped and hard to use on a phone.
Tap targets too small or too close together — Links and buttons sized for a mouse are hard to hit accurately with a thumb. Small, tightly packed tap targets cause mis-taps and frustration — comfortable touch sizing and spacing is a core part of a usable mobile page.
Responsiveness added only by JavaScript — If layout adaptation is injected by client-side scripts after load, a crawler that reads the initial HTML may not see the responsive signals at all. Baking the viewport tag and media queries into the delivered HTML keeps them reliably visible.
Where this matters
Google mobile-first indexing — Google predominantly crawls and indexes the mobile version of pages, so the mobile experience is the basis for how a page ranks for everyone. A page missing the core mobile signals risks being judged on a broken rendering.
Google & Bing page experience — Mobile usability feeds into the page-experience signals both engines consider. A page that scales correctly, has comfortable tap targets and avoids horizontal scrolling clears the baseline these signals expect.
WordPress, Shopify, Wix & themes — Most modern themes are responsive out of the box, but custom code, old templates and copied snippets can still drop or override the viewport tag. This check confirms the signals actually made it into the delivered page.
Mobile browsers (Chrome, Safari) — Phone browsers rely on the viewport tag to decide how to lay out the page. Get it right and the same layout adapts cleanly across the range of phone screen sizes your visitors actually use.
Smartphones & tablets — Responsive CSS and flexible widths let one page serve every screen size, from a small phone to a large tablet, without separate code. Fixed-width layouts are what break that adaptability on smaller devices.
Frequently asked questions
What makes a page mobile-friendly?
At minimum, a viewport meta tag set to width=device-width, responsive CSS that adapts the layout at different screen sizes, comfortable tap targets, readable text without zooming, and no horizontal scrolling. This tool checks the structural signals — viewport, responsive CSS and fixed-width warnings — that underpin all of that.
What is the viewport meta tag?
It's a line in the page head, typically <meta name="viewport" content="width=device-width, initial-scale=1">, that tells mobile browsers to size the layout to the device's screen instead of assuming a desktop width. Without it, phones shrink the whole page to fit and everything looks tiny.
Why does width=device-width matter so much?
It's the instruction that makes the browser match the page to the actual screen width. Even a page full of responsive media queries won't scale correctly on a phone if this is missing, so it's the single most important part of the viewport tag.
What is mobile-first indexing?
Google primarily uses the mobile version of a page to crawl, index and rank it — for all users, not just mobile ones. That means a page that renders poorly on mobile can hurt your rankings everywhere, which is why these signals are worth getting right.
My page looks fine on my phone — why does the tool flag it?
The check reads the page's HTML signals, not just appearance. A page can look acceptable yet be missing the viewport tag (so it's relying on the browser's fallback behaviour) or have its responsiveness injected by scripts a crawler doesn't run. The flags point you to what a bot actually sees.
What are tap targets and why do they matter?
Tap targets are the clickable areas — links and buttons. On a phone they need to be large enough and spaced enough to hit accurately with a thumb. Small, crowded targets cause mis-taps and are a recognised mobile-usability problem, hurting both experience and page-experience signals.
Do I need a separate mobile site?
No. A single responsive page that uses the viewport tag and media queries to adapt to any screen is the modern standard and the simplest to maintain. Separate mobile sites add complexity and a second URL set to keep in sync — responsive design avoids both.
How soon will mobile fixes affect rankings?
Users get the improved experience immediately. Search engines re-evaluate the page the next time they re-crawl it under mobile-first indexing, so ranking effects typically appear over days to a few weeks rather than instantly.
This is one of several free SEO tools from Custom Web Audits.
For a complete, prioritized analysis of your whole website,
run a full audit.
