Mobile-Friendly Test

Mobile-Friendly Test

Check if your current device is mobile, tablet, or desktop. View viewport, touch capability, screen orientation.

What is a Mobile-Friendly Test?

A Mobile-Friendly Test checks if your website renders correctly on smartphones — readable text without zoom, tap targets large enough for fingers, viewport configured correctly, no horizontal scrolling, responsive layouts, mobile-optimized images. Since Google switched to mobile-first indexing in 2019, your site’s mobile experience is what Google ranks (not desktop). A site that looks great on desktop but breaks on mobile loses rankings, conversions, and traffic. This tool tests: viewport meta tag, touch target sizes (44px minimum recommended), text legibility (font size ≥ 16px), responsive design (no horizontal scroll), image scaling, mobile-friendly markup. Quick pass/fail check before submitting your site for Google Search Console review.

How to use this tool

  1. Enter your URL — Full URL including https://. Tool fetches and analyzes the page.
  2. Run the test — Checks viewport, tap targets, text size, image responsiveness.
  3. Review report — Pass / fail with specific issues identified.
  4. Fix issues, retest — Common fixes: add viewport meta tag, increase font size, set max-width on images, use CSS media queries.
  5. Submit to Google Search Console — Once passing, use Google’s official Mobile-Friendly Test as final verification.

Mobile-friendly checklist

Google’s mobile-friendly criteria (and what this tool checks):

1. Viewport meta tag:

<meta name='viewport' content='width=device-width, initial-scale=1'>

Without this, mobile browsers render desktop-width content forcing horizontal scroll.

2. Readable text:

  • Body text minimum 16px (12pt) — smaller forces user to zoom
  • Line height 1.4-1.6 for readability
  • Contrast ratio >4.5:1 between text and background

3. Touch targets:

  • Buttons/links minimum 44×44 pixels (Apple’s standard)
  • Adjacent targets at least 8px apart to avoid mis-taps

4. Responsive layout:

  • No horizontal scrolling at common widths (320px, 375px, 414px)
  • Content adapts (single-column on mobile, multi-column on desktop)
  • Images use max-width:100% to scale down

5. Performance:

  • Pages load <3 seconds on 4G
  • Images compressed and lazy-loaded
  • No render-blocking scripts

Examples

  • Pass scenario: Modern WordPress theme (Astra, GeneratePress, Hello Elementor) — mobile-friendly out of the box
  • Fail: missing viewport: Old static HTML site — add <meta viewport> tag to head
  • Fail: tiny tap targets: Designer used 24px buttons — increase to 44px min for mobile
  • Fail: text too small: Designer used 12px body font — increase to 16px (still readable on desktop, vital on mobile)
  • Fail: image overflow: Hero image fixed at 1920px width — add max-width:100% so it scales
  • Fail: horizontal scroll: Table with fixed 800px width — wrap in overflow-x:auto container
  • Fail: slow load: Unoptimized photos — use our Image Compressor + lazy loading

Tips & best practices

  • Always include the viewport meta tag — foundational for mobile responsiveness
  • Use CSS min-width media queries: @media (min-width: 768px) — mobile-first approach
  • Test on multiple devices: 320px (small phones), 375px (iPhone SE), 414px (iPhone Plus), 768px (tablet)
  • Browser DevTools (F12 → device toolbar) simulates mobile — quick first check before deploying
  • Don’t use hover effects for critical actions — phones don’t have hover
  • Larger tap targets reduce mis-clicks — especially in dense UI (forms, navigation menus)
  • Mobile-first indexing means: Google’s primary index is mobile version. Hide desktop-only content carefully
  • Use Google’s official Mobile-Friendly Test (search.google.com/test/mobile-friendly) for definitive Google result

Limitations & notes

This tool checks common mobile issues but Google’s official Mobile-Friendly Test (search.google.com/test/mobile-friendly) is the authoritative result for Google ranking. Tool doesn’t measure full performance metrics (Core Web Vitals, LCP, CLS, FID) — use Google PageSpeed Insights for those. Doesn’t test specific mobile browsers (Safari iOS vs Chrome Android may render differently — visual testing on real devices still important).

Frequently Asked Questions

Why is mobile-friendliness important for SEO?

Google switched to mobile-first indexing in 2019 — the mobile version of your site is what gets indexed and ranked. Sites that fail mobile-friendly tests rank lower in mobile search results (which are 60%+ of all Google searches).

What’s the minimum font size for mobile?

16px (12pt) for body text. Smaller forces users to zoom — Google flags this as ‘text too small to read’. Headers can be larger (18-32px+).

Why 44 pixels for tap targets?

Average adult finger pad is ~10mm = ~44px on standard screens. Apple’s Human Interface Guidelines set 44pt as the touchable minimum. Google follows the same standard.

Is my responsive theme automatically mobile-friendly?

Modern themes (Astra, GeneratePress, Hello Elementor, Divi) yes. Older themes from 2015 may fail modern criteria. Test before assuming.

How do I fix ‘tap targets too close’?

Add CSS: button { padding: 12px 20px; margin: 8px; min-height: 44px; }. Increases size + spacing in one rule.

Should I have a separate mobile site (m.example.com)?

No — outdated approach. Use responsive design (one site, CSS adapts to viewport) instead. Maintaining separate URLs creates SEO issues (duplicate content, link equity split).

What if my site has heavy charts/tables that don’t fit mobile?

Options: (1) wrap in overflow-x:auto to allow horizontal scroll within the chart, (2) use responsive chart libraries (Chart.js, D3.js with adaptive layouts), (3) hide complex tables on mobile and show simpler summary instead.

Related tools

Meta Tag Generator · SERP Snippet Preview · Schema.org Generator

Copied