Multiple Viewport Tags: How to Fix Conflicting Tags

What "Multiple Viewport Tags" means

The viewport meta tag tells a mobile browser how to set the width and zoom level of the page before it renders anything. It is the single line that makes responsive design actually work on phones, because it overrides the browser's default assumption that the page was built for a wide desktop screen. The standard, recommended form is one tag in the document head that sets the layout width to the device width at 100% zoom.

This audit issue fires when our crawler finds more than one <meta name="viewport"> element in the head of a single page. Only one is ever needed. When two or more are present, the browser receives competing instructions about how to size and scale the page, with no guarantee it resolves that conflict the way you intend.

Why duplicate viewport tags cause inconsistent mobile rendering

A viewport tag is not advisory metadata like a description. It is a direct rendering instruction. When a browser encounters two viewport tags with different content values, it has to pick one, and that resolution is not something you control reliably. Some browsers honor the first tag they parse; others apply the last one and override what came before. Different browser engines, and even different versions of the same engine, can behave differently. The result is rendering that looks correct in one environment and broken in another.

In practice this shows up as a page that is zoomed out and tiny, a layout that needs horizontal scrolling, text too small to read without pinching, or media queries that never trigger because the layout width the browser adopted is not the one your CSS breakpoints expect. Because the conflict resolves unpredictably, the same page can render correctly for one visitor and poorly for another, which makes it frustrating to reproduce and easy to miss in casual testing.

Mobile rendering is also a signal search engines care about, so it is worth resolving even when one of the two tags happens to be correct.

Common causes (theme plus plugin)

On WordPress and similar CMS platforms, the most common cause is two different parts of the stack each adding a viewport tag without knowing the other already did. The classic pairing is your theme and a plugin both injecting one.

Typical sources

The theme's header.php almost always prints a viewport tag directly. A second tag can then come from a page builder (Elementor, Divi, WPBakery), an AMP or mobile-optimization plugin, a caching or "mobile view" plugin, a child theme that re-declares the head, or a custom-header snippet someone pasted a viewport line into. Any of these added alongside the theme's existing tag produces the duplicate.

Which one wins

There is no defined winner. The HTML specification does not promise that the first or the last viewport tag takes precedence, so the outcome depends on the browser's implementation. You should treat the result as undefined rather than guessing. This is exactly why the fix is to eliminate the duplication entirely rather than to reorder the tags and hope the "right" one is selected.

How to diagnose

First confirm the duplication on the live page. Open the URL flagged in this audit, view the page source, and search the head for name="viewport". If you see the string more than once, the issue is real and present in the rendered output.

Next, identify the source of each tag. Temporarily disable plugins one at a time and re-check the source after each, or use your browser's developer tools to inspect the head. If one tag disappears when a specific plugin is off, that plugin is one source. The tag that remains with all plugins disabled is almost always coming from the theme's header.php. A site-wide crawl with a tool that reports this hint will tell you whether the duplication affects every page (pointing to the theme plus a global plugin) or only certain templates.

How to fix: keep exactly one correct viewport tag

The goal is a single, correct viewport tag in the head. Find the redundant source and remove it, leaving the canonical one in place. If your theme already outputs a correct tag, disable the plugin or setting that adds the second one. If the extra tag comes from a custom snippet you control, delete that line. Do not add a third tag to "fix" the first two.

A single viewport tag can serve every screen size, so there is never a reason to declare more than one. Keep this:

<!-- Bad: two viewport tags, conflicting instructions -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=1024">

<!-- Good: one correct viewport tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">

After making the change, clear any caching layer, reload the page source, and confirm that name="viewport" now appears exactly once. Re-run the crawl to clear the issue across the site.

Common mistakes

The most frequent mistake is removing the wrong tag and deleting the only correct one, leaving a viewport setting that breaks the layout, so always confirm which tag is correct first. A second is "fixing" the conflict by editing both tags to match instead of removing one, which leaves the duplication and the issue unresolved. A third is clearing the issue locally while a caching plugin or CDN still serves the old duplicated head, so always purge caches and re-verify the live output. Finally, do not assume reordering solves it, since the winning tag is undefined.

FAQ