Skip to main content
SlapMyWeb
Slap a site
Fix Guide

How to Fix a Missing Viewport Meta Tag

Add the tag that makes a responsive layout actually apply on phones.

Easy High Impact 5 min

Without a viewport meta tag, mobile browsers render the page at a desktop width and scale it down, so text is unreadable and every media query is bypassed. One line fixes it. A site can be fully responsive in CSS and still look broken on a phone purely because this tag is absent.

Why It Matters

With mobile-first indexing, the mobile rendering is what gets indexed and ranked. A page that renders zoomed-out fails both the ranking evaluation and the visitor.

How to Fix

1

Add the tag to the head

width=device-width, initial-scale=1 is the standard value and is right for nearly every site.
2

Do not disable zoom

user-scalable=no and a low maximum-scale prevent people from zooming, which is an accessibility failure. Leave both out.
3

Check every template

It is usually set once in a root layout, so a missing one often means an error page or an embed uses a different template.
4

Verify on a narrow viewport

Load the page at 375 pixels wide. Text should be readable without zooming and nothing should scroll sideways.

Code Fix

html
Before (broken)
<head>
  <!-- no viewport tag: mobile renders at ~980px and scales down -->
</head>
After (fixed)
<meta name="viewport" content="width=device-width, initial-scale=1">

Platform-Specific Instructions

WordPress

Themes should output this in header.php. Very old themes sometimes omit it.

Next.js

Next adds a sensible default; it goes missing only if the viewport export is overridden with something incomplete.

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs — and links each one straight to its guide.

Run a free audit
Free foreverNo signupResults in 30s