Mobile is the real page
Set the viewport, never scroll sideways, give phones everything.
From seo-audit, Technical SEO: Mobile-Friendliness.
Configure the viewport
Pick a device, then edit the tag or load a preset.
No viewport tagBad
<!-- no viewport meta: 980px layout -->Your tagGood
<meta name="viewport" content="width=device-width, initial-scale=1">
Never scroll sideways
Drag the width to 320px, then switch to Fixed.
Invoice INV-000481
hero.jpg · 520 × 228
Pay nowDownload PDFDispute
Pay link: https://billing.northwind.example/pay/INV-000481-2026-09-a8f3c1d9e2b7f4
| Item | Qty | Rate | Tax | Amount |
|---|---|---|---|---|
| Monthly bookkeeping | 1 | $1,200.00 | $0.00 | $1,200.00 |
| Payroll, 14 employees | 14 | $12.00 | $0.00 | $168.00 |
img, video, svg { max-width: 100%; height: auto; }
.table-wrap { overflow-x: auto; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
p, td { overflow-wrap: anywhere; }
Serve the same content
Switch architecture, then search a phrase.
Desktop, example.comNot indexed
Mobile, m.example.comIndexed
<link rel="canonical" href="https://example.com/lumen-14">
<details><summary>Specs</summary> Battery life 18 hours … </details>
@media (min-width: 768px) { .specs { columns: 2; } }
Why it matters, pros and cons
Why it matters
Google crawls with a smartphone agent. The mobile page is the one it judges.
Pros
- One URL per page, signals not split.
- Readable without pinch-zoom.
- No m. redirects to keep in sync.
Cons
- Phones get desktop assets without
srcset. - Wide tables need real mobile design work.
overflow-x: hiddenhides the scrollbar, not the problem.