Fix Guide

How to Add the Mobile Viewport Meta Tag

Add the one tag that makes your site scale correctly on phones.

Easy Medium Impact 2 min

Why It Matters

Without a viewport meta tag, mobile browsers render the page at desktop width and zoom out — text becomes tiny and unusable. This single tag is the foundation of responsive design and mobile-friendliness (a ranking factor).

How to Fix

Add the viewport meta tag

Place it in the <head> so the layout matches the device width at 1:1 scale.

Don't block zoom

Avoid maximum-scale=1 / user-scalable=no — disabling pinch-zoom is an accessibility failure.

Code Fix

html

Before (broken)

<head>
  <!-- no viewport tag → desktop layout on phones -->
</head>

After (fixed)

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

Platform-Specific Instructions

WordPress

Virtually all modern themes include this. If yours doesn't, add it via the theme header or a header-scripts plugin.

Next.js

Next adds a sensible default; override via the viewport export if needed.

Want to find all issues at once?

Run a free audit and get a prioritized fix list with auto-generated code.

Run a free audit

How to Add the Mobile Viewport Meta Tag — Fix Guide | SlapMyWeb