Technical fix

How to fix a missing viewport meta tag

Without a viewport tag, a phone assumes your site is a desktop page and shrinks the whole thing to fit — tiny text, pinch-to-zoom, and a mobile-friendly test that fails. It's a one-line fix.

The viewport meta tag tells a mobile browser to render the page at the device's own width instead of pretending to be a ~980px desktop screen and zooming out. It is the single most important line for mobile-friendliness.

Google indexes mobile-first, so a page that is not mobile-friendly is judged on that broken mobile experience. This one tag is table stakes.

Why it matters

Since Google switched to mobile-first indexing, the mobile rendering of your page is the version that gets ranked. A missing viewport tag makes text microscopic and tap targets unusable on phones, hurting both the mobile-friendly signal and real user behaviour (bounce, dwell time).

How to tell if this is you

Abby flags “Viewport” when the viewport meta tag is missing from your page head. The fix is adding the standard one-liner.

Not sure if your site has this?

Run Abby's free scan — it checks this and 25 other on-page, technical, and structured-data signals in about 60 seconds, no signup.

Scan my site free

The fix

Add <meta name="viewport" content="width=device-width, initial-scale=1"> in your <head> section. This is essential for mobile-friendly rendering.

Before

<head>
  <!-- no viewport tag: phones render at desktop width and zoom out -->
</head>

After

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

Fix it on your platform

WordPress

Most WordPress themes include the viewport tag. If missing, add it to your theme's header.php or use the wp_head action hook.

Apache / Nginx

Add the viewport meta tag to your HTML template's <head> section.

When this doesn’t apply

Universally required for any page intended for mobile users. The only legitimate exception is a desktop-only admin interface explicitly marked as unsupported on mobile, which is an unusual choice in 2024+.

Fix every issue at once.

Abby's free scan finds which of 26 checks your site fails. The $8.99 fix guide turns each one into a copy-ready fix for your exact pages — prioritized, with code — or bundle it with a security fix guide for $19.99.

Get my fix plan

FAQ

What does width=device-width do?

It tells the browser to set the layout width to the device's actual screen width in CSS pixels, instead of the default ~980px desktop assumption. initial-scale=1 sets the starting zoom to 100%.

Should I use user-scalable=no to lock zoom?

No. Disabling zoom is an accessibility failure — users with low vision need to pinch-zoom. Use width=device-width, initial-scale=1 and leave zoom enabled.

My theme is responsive — do I still need this?

Yes. A responsive CSS layout still relies on the viewport tag to trigger it on mobile. Without the tag, your media queries never behave as intended because the browser reports a desktop width.