Viewport Meta Issues

Looking through binoculars backwards — that's what a missing or broken viewport meta tag does to your mobile experience.

What is this?

Imagine picking up a pair of binoculars and looking through the wrong end. Everything is tiny, far away, and impossible to interact with. That is exactly what happens when your page is missing the viewport meta tag or has it configured incorrectly. Without it, mobile browsers assume your page was designed for a 980px-wide desktop screen and shrink everything to fit a 375px phone. Your visitors get a miniature version of your site that requires pinching, zooming, and squinting.

Why it matters

For your visitors: Without a proper viewport tag, text is microscopic, buttons are impossibly small, and your visitors must double-tap to zoom in on every section just to read anything. It transforms your carefully designed page into a frustrating guessing game. This is the most basic mobile requirement, and when it is missing, the entire mobile experience is broken.
For your business: Google explicitly uses mobile-friendliness as a ranking factor, and a missing viewport meta tag is an instant fail. Google's mobile-friendly test flags this as a critical issue. It also triggers Google's "page not mobile-friendly" warning in search results, which scares visitors away before they even click.
The standard: Every page should include <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head>. This tells the browser to match the viewport width to the device width and start at 1x zoom. Do not disable user scaling.

Correct viewport meta

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

Missing or broken viewport

<head>
  <!-- No viewport tag at all — mobile browser assumes 980px width -->
</head>

<!-- Or worse: disabling zoom -->
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1,
    maximum-scale=1, user-scalable=no" />
</head>

How to fix it

React / Next.js

Next.js sets the viewport meta tag automatically via its Metadata API. Check your root layout to make sure it is not overridden incorrectly.

// src/app/layout.tsx
import type { Metadata, Viewport } from "next";

// Next.js 14+ uses a separate viewport export
export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  // Do NOT include maximumScale: 1 or userScalable: false
  // That disables zoom, which is an accessibility violation
};

export const metadata: Metadata = {
  title: "My App",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

If you are manually adding a viewport tag (maybe from an AI-generated template), make sure it does not disable zooming:

// BAD: these properties disable zoom and hurt accessibility
// maximum-scale=1
// user-scalable=no
// user-scalable=0

// GOOD: just these two properties are all you need
// width=device-width
// initial-scale=1

Plain HTML

Add the viewport meta tag inside <head>. This is one line of code — there is no excuse for missing it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Page</title>
  </head>
  <body>
    <!-- Your content -->
  </body>
</html>

Common mistakes to avoid:

<!-- DO NOT set a fixed width -->
<meta name="viewport" content="width=1024" />

<!-- DO NOT disable user zoom — it's an accessibility violation -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

<!-- DO NOT set maximum-scale to 1 — same problem, blocks zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

High impact — mobile~2 paws

This is the most fundamental mobile requirement. Without the viewport tag, nothing else matters — your entire mobile experience is broken. The cat is baffled when this is missing.

How the cat scores this

The scanner checks for the presence of a <meta name="viewport"> tag in the <head>. It verifies that width=device-width and initial-scale=1 are set. It also penalizes pages that disable user scaling (user-scalable=no or maximum-scale=1) because preventing zoom is an accessibility violation — people with low vision need to zoom. A missing viewport tag is one of the highest-severity mobile issues the scanner can report.