Search Console 给某些 URL 标 “Not mobile friendly”，意味着 Google 在用 Mobile-first indexing 抓取时发现页面在手机上不能正常使用——可能是文字太小要捏开看、按钮挤在一起、横向滚动、布局错位。Mobile-first index 自 2021 年以后是默认行为，移动端不能用 = 收录质量降级、排名打折。
下面是 6 个最高频触发点和具体修法。
常见原因
1. 缺 viewport meta（最致命）
没这一行，浏览器按桌面端 980px 渲染，手机上字超小要捏开：
<meta name="viewport" content="width=device-width, initial-scale=1">如何判断：
curl -sL https://yourdomain.com/page | grep -i viewport
# 找不到这一行就是缺2. 按钮 / 链接点击区域太近
Google 要求可点击元素 ≥ 48 × 48px，互相之间间距 ≥ 8px。挤在一起的导航 / 表单按钮会被标。
如何判断：Search Console → 移动设备易用性 → 报错里看 “Tap targets too close”；或用 Chrome DevTools → Device Mode → 看 button / link 的实际 box 大小。
3. 横向滚动 / 内容超出 viewport
某个元素 width 写死大于 viewport（例如 width: 600px 在 360px 屏上），整个页面会横向滚。常见 culprits：
- 大图没
max-width: 100% - 表格不响应式
- 代码块
pre没 overflow 处理 - iframe 写死 width
/* 万能修补 */
img, video, iframe {
max-width: 100%;
height: auto;
}
pre {
overflow-x: auto;
}
table {
display: block;
overflow-x: auto;
}4. 字号太小
桌面端 14px 在手机上看起来像 10px。Google 要求正文 ≥ 16px。
body {
font-size: 16px;
line-height: 1.6;
}
@media (max-width: 480px) {
body { font-size: 17px; } /* 小屏稍大 */
}5. 弹窗 / 同意横幅遮挡内容
Google 对”侵入式 interstitial”（覆盖主内容的弹窗）会降权。Cookie 同意横幅可以放底部薄条，不要全屏遮罩。
6. 关键 CSS 在 client-only 加载
如果你 SSR 不出 CSS，移动端首屏渲染 1-2 秒后才变样式 → Lighthouse 判定为 mobile usability 问题。
如何判断：Chrome DevTools → Network → Disable JavaScript → 看页面是否仍然有基础样式。
最短修复路径
Step 1：用 PageSpeed Insights 拿到具体报错
https://pagespeed.web.dev/?url=https://yourdomain.com/your-page跑完看”移动设备”标签，里面会列出具体问题：viewport 缺、tap target、字号、CLS、LCP 等。
Step 2：先加 viewport meta（80% 情况一行解决）
在所有页面模板 <head> 最上面：
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
...
</head>千万别加 user-scalable=no 或 maximum-scale=1 —— 影响 a11y，Google 也会标。
Step 3：响应式 CSS 兜底
把以下加到全局 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：本地用 Chrome DevTools Device Mode 测
1. Chrome DevTools → 左上角 Toggle device toolbar (Cmd+Shift+M)
2. 选择 "iPhone 14 Pro" 或 "Pixel 7"
3. 逐页面浏览，注意横向滚动条 / 字小 / 按钮挤
4. Throttling: Mid-tier mobile，看实际加载体验Step 5：部署后用 Search Console 验证
Search Console → URL 检查 → 输入修复后的 URL → “测试实际网址” → “查看抓取的网页” → “屏幕截图”：应该看到正常的手机端布局。
然后到原报错位置 → “验证修复”。Google 会在 7-21 天内复审。
Step 6：把全站性的检查加进 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); }预防建议
- 新模板必须先在 mobile（Pixel/iPhone）上测过才能上线
- 用合理默认的 CSS 框架（Tailwind / Pico.css）自动响应式
- 字号永远 ≥ 16px，按钮永远 ≥ 48 × 48px
- viewport meta 写进 base layout，不留漏
- CI 拦截：缺 viewport / user-scalable=no 直接 build fail