Mobile-Friendliness & Responsive Checker
Audit your website for viewport tag configuration, pinch-to-zoom accessibility, responsive image delivery, and mobile SEO readiness.
Mobile-First Indexing & Responsive Design Fundamentals
1. The Four Checks Explained
Viewport tag tells the mobile browser how to scale the page — without it, phones render at a virtual 980px desktop width and then zoom out, making text tiny and unreadable. Pinch-to-zoom accessibility checks that you haven't blocked users from zooming via user-scalable=no or maximum-scale=1, which is both a usability and accessibility problem. Responsive images looks for markers (srcset, <picture>, fluid CSS) that let images scale to fit smaller screens instead of overflowing or forcing horizontal scroll. Media queries checks for CSS breakpoints that adapt layout to different screen sizes.
2. How to Use This Checker
Enter a URL and click “Check Mobile Friendliness.” The tool returns a 0-100 score (viewport tag counts most, at 40 points; the other three signals are worth 20 each) plus a pass/warning checklist explaining each finding. A score below 80 flags the page as needing mobile optimization work — start with whichever checklist item is failing, since the viewport tag alone accounts for the largest score impact and is usually the highest-priority fix if missing.
3. What Mobile-First Indexing Actually Means
Since 2023, Google indexes and ranks essentially all websites based primarily on the mobile version of their content — Googlebot Smartphone is the primary crawler for most sites. This means if your mobile experience is broken, cramped, or missing content that only shows on desktop, that's what Google evaluates for ranking purposes, regardless of how polished your desktop layout is. Getting the fundamentals right — a correct viewport tag, unblocked zoom, and content parity between mobile and desktop — is foundational to how Google sees your site at all, not just a nice-to-have.
4. Common Mistakes
The most common mistake is a leftover user-scalable=no from an older design pattern intended to prevent accidental zoom on form inputs — this blocks legitimate zoom for low-vision users and violates WCAG 2.1's Resize Text criterion. Another is hiding content on mobile (via display: none in a mobile media query) that's present on desktop, which can mean Google never sees that content at all under mobile-first indexing. A third is images or embeds with a fixed pixel width that overflow the viewport on narrow screens, forcing horizontal scroll — a jarring mobile experience even when the viewport tag itself is correctly configured.
5. Limitations
This tool checks HTML/CSS markers, not actual rendered layout — it cannot detect overlapping elements, text that's technically resizable but still too small by default, undersized tap targets, or content that differs between mobile and desktop versions of a page. A page can pass all four checks here and still have real mobile usability problems that only show up in an actual device or browser emulator test. Use this as a fast first-pass technical check, then verify visually on a real device or in your browser's device emulation mode.
Frequently Asked Questions
Why is mobile-friendliness crucial for Google SEO rankings?
Google utilizes Mobile-First Indexing for all websites, meaning Googlebot crawls and ranks your site entirely based on its mobile smartphone experience and Core Web Vitals.
Why should "user-scalable=no" be avoided in viewport meta tags?
Disabling user zooming violates WCAG 2.1 accessibility guidelines (Criterion 1.4.4: Resize Text), preventing visually impaired visitors from reading small fonts.
What is the standard mobile viewport meta tag configuration?
The recommended tag is: <meta name="viewport" content="width=device-width, initial-scale=1">.
Does passing this check guarantee my site is fully mobile-friendly?
No. This tool checks four specific HTML/CSS signals (viewport tag, zoom restriction, responsive image markers, media queries) — it does not render the page in a real mobile browser and cannot detect issues like overlapping elements, undersized tap targets, horizontal scrolling, or text that's too small to read despite technically having a correct viewport tag. Passing this checklist is a good sign, but a real device or emulator test is the only way to fully confirm mobile usability.
How does this tool detect "responsive images"?
It looks for `srcset` attributes, `<picture>` elements, or `max-width: 100%` in inline/embedded CSS — common technical markers of a responsive image setup. A site could still handle images responsively through other means (external stylesheets this tool doesn't fetch, or a CDN transformation approach) without tripping these specific patterns, so a "Standard" result here doesn't necessarily mean your images render poorly on mobile.