Skip to main content
SlapMyWeb
Slap a site

Mobile fix

How to Fix a Missing Viewport Meta Tag

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

Difficulty
Easy
Impact
High
Time
5 min

Before

<head>
  <!-- no viewport tag: mobile renders at ~980px and scales down -->
</head>

After

<meta name="viewport" content="width=device-width, initial-scale=1">
Before and after code for: How to Fix a Missing Viewport Meta Tag

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 it

  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.

The code

Beforehtml
<head>
  <!-- no viewport tag: mobile renders at ~980px and scales down -->
</head>
Afterhtml
<meta name="viewport" content="width=device-width, initial-scale=1">

On your platform

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.

Sources

More fixes

Mobile

How to Fix Content Wider Than the Screen

Stop horizontal scrolling on mobile by replacing fixed widths with responsive ones.

Performance

How to Minify Your CSS

Strip comments and whitespace from stylesheets to cut their size by 30-50%.

Performance

How to Minify Your JavaScript

Compress JS by removing comments, whitespace and shortening names: often a 40-60% reduction.

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 signupLive scan progress