No viewport tag: phones show the desktop layout

Why it matters

Without a viewport tag, a phone lays the page out as if it were about 980 pixels wide and shrinks the result to fit, so visitors get tiny text they have to pinch and scroll sideways to read. Google indexes the mobile version of your site, and says of this tag: "Presence of this tag indicates to Google that the page is mobile friendly."

Sources: meta tags Google supports; Responsive web design basics for the 980-pixel fallback. Google names no penalty for leaving it out, so this is a warning about your visitors rather than an indexing error.

How to fix it

Add this inside <head>:

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

Then check the page on a phone: the tag asks for a mobile layout, and the stylesheet still has to provide one.

Examples

These are the rule's own test pages, and what it says about each. They are run on every change to the rule book.

<html lang="en">
<title>T</title>
<meta name="viewport" content="width=1024">

WarningThe viewport tag doesn't ask for the device's width ("width=1024"), so phones may still show a shrunken layout.

fail-fixed-width

<html lang="en">
<title>T</title>

WarningThe page has no viewport tag, so phones show a shrunken desktop layout.

fail-none

<html lang="en">
<title>T</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

PassedThe page has a viewport tag for phones.

pass-device-width