AI AI Tools Guidebook
Troubleshooting

Page Not Mobile-Friendly Warning

Search Console flagged pages as not mobile-friendly. Typically viewport, tap targets, or content cut-off.

Published: Author: AI Productivity Guide Team 🌐 查看中文版本

Search Console flags URLs as “Not mobile friendly” when Mobile-first indexing crawls the page and finds it broken on phones — text too small to read without pinching, buttons crowded, horizontal scrolling, or layout breaking. Mobile-first index has been the default since 2021, so unusable on mobile = degraded indexing quality and ranking penalty.

Below are the 6 highest-frequency triggers and their specific fixes.

Common causes

1. Missing viewport meta (most fatal)

Without this line, browsers render at desktop 980px and text is tiny on phones:

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

How to confirm:

curl -sL https://yourdomain.com/page | grep -i viewport
# No match = missing

2. Buttons / links tap targets too close

Google requires clickable elements ≥ 48 × 48px with ≥ 8px spacing between them. Crammed nav / form buttons get flagged.

How to confirm: Search Console → Mobile Usability → look for “Tap targets too close.” Or Chrome DevTools → Device Mode → inspect actual button / link box sizes.

3. Horizontal scroll / content overflows viewport

An element with hardcoded width larger than the viewport (e.g., width: 600px on a 360px screen) makes the whole page scroll sideways. Common culprits:

  • Large images without max-width: 100%
  • Non-responsive tables
  • Code blocks pre without overflow handling
  • iframes with hardcoded width
/* Universal patch */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

pre {
  overflow-x: auto;
}

table {
  display: block;
  overflow-x: auto;
}

4. Font size too small

Desktop 14px looks like 10px on a phone. Google wants body text ≥ 16px.

body {
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 480px) {
  body { font-size: 17px; }  /* slightly bigger on small screens */
}

5. Intrusive modals / consent banners blocking content

Google penalizes “intrusive interstitials” (modals covering main content). Cookie consent banners belong at the bottom as a thin bar, not as a full-screen overlay.

6. Critical CSS only loads client-side

If you don’t SSR the CSS, mobile first paint shows unstyled content for 1-2 seconds → Lighthouse flags as a mobile usability issue.

How to confirm: Chrome DevTools → Network → Disable JavaScript → does the page still have base styling?

Shortest path to fix

Step 1: Get the specific errors from PageSpeed Insights

https://pagespeed.web.dev/?url=https://yourdomain.com/your-page

Run and check the “Mobile” tab — it lists the actual issues: missing viewport, tap targets, font size, CLS, LCP, etc.

Step 2: Add viewport meta (80% of cases solved in one line)

In every page template <head> at the top:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  ...
</head>

Never use user-scalable=no or maximum-scale=1 — hurts accessibility, Google also flags.

Step 3: Responsive CSS safety net

Add to your global stylesheet:

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
pre, code { white-space: pre-wrap; overflow-x: auto; }
table { display: block; overflow-x: auto; }
button, a {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 16px;
}
body { font-size: 16px; line-height: 1.6; }

Step 4: Test locally in Chrome DevTools Device Mode

1. Chrome DevTools → top-left Toggle device toolbar (Cmd+Shift+M)
2. Select "iPhone 14 Pro" or "Pixel 7"
3. Walk through pages, watch for horizontal scroll / small text / cramped buttons
4. Throttling: Mid-tier mobile to see actual load experience

Step 5: After deploy, verify in Search Console

Search Console → URL Inspection → enter the fixed URL → “Test live URL” → “View crawled page” → “Screenshot.” You should see a normal mobile layout.

Then go to the original error → “Validate fix.” Google re-evaluates within 7-21 days.

Step 6: Add site-wide checks to CI

// scripts/check-mobile-friendly.mjs
import fg from "fast-glob";
import fs from "node:fs";

const issues = [];
for (const f of fg.sync("dist/**/*.html")) {
  const html = fs.readFileSync(f, "utf8");
  if (!html.match(/<meta\s+name=["']viewport["']/i)) {
    issues.push(`MISSING viewport: ${f}`);
  }
  if (html.match(/user-scalable\s*=\s*["']?no/i)) {
    issues.push(`BAD viewport (user-scalable=no): ${f}`);
  }
}
if (issues.length) { console.error(issues.join("\n")); process.exit(1); }

Prevention

  • New templates must be tested on real mobile (Pixel/iPhone) before going live
  • Use a CSS framework with sane defaults (Tailwind / Pico.css) that auto-responsive
  • Body text always ≥ 16px; buttons always ≥ 48 × 48px
  • viewport meta lives in the base layout — no template can omit it
  • CI blocks: missing viewport / user-scalable=no fails the build

Tags: #SEO #Google #Search Console #Indexing

Related Articles