How to Fix a Missing Viewport Meta Tag
Your page is missing the viewport meta tag, so mobile browsers render it at desktop width and shrink it to fit the screen. This is a one-line HTML fix that makes the page mobile-friendly.
What this means
The viewport meta tag tells a mobile browser how wide to make the page and how to scale it. Without it, the browser assumes a desktop-width layout (around 980px in most mobile browsers) and shrinks the whole page to fit the phone screen. The result is tiny text, links too small to tap, and users pinch-zooming to read.
The tag you're missing looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
It belongs in the <head> of your HTML. width=device-width sets the layout width to the device's own width, and initial-scale=1 sets the starting zoom to 100%.
Our audit flags missing_viewport when it finds no <meta name="viewport"> in the page's head. This is separate from whether your CSS is actually responsive. The tag is the switch that lets responsive CSS work: if it's missing, even a well-built responsive stylesheet renders as a zoomed-out desktop page on phones.
Why it matters
Google uses mobile-first indexing, so it primarily crawls and ranks the mobile version of your page. A page with no viewport tag fails Google's mobile-friendly criteria, and mobile-friendliness is a ranking factor on mobile search. A page that forces pinching and zooming is also harder to use, which pushes visitors to bounce before they engage.
Since most search traffic is mobile, this affects the majority of your visitors rather than an edge case. The content is still all there, but it's presented at desktop scale on a small screen: text below comfortable reading size, tap targets too close together to hit reliably, and horizontal scrolling to see the full layout.
For AI answer engines the impact is more indirect. Crawlers for ChatGPT, Perplexity, and Google's AI Overviews read your raw HTML, so a missing viewport tag doesn't stop them from extracting your content. But these systems draw on the same page-experience and mobile-friendliness signals that classic ranking uses, and a page Google treats as poor on mobile is a weaker candidate to be surfaced or cited. Adding the tag clears a basic quality flag that could otherwise hold the page back.
How to fix it
- 1
Add the tag to your <head>
Paste
<meta name="viewport" content="width=device-width, initial-scale=1">inside the<head>of your page, ideally near the top before your stylesheets. One tag per page is enough; don't add duplicates. If your site uses a shared header template or layout file, add it there once so every page inherits it. - 2
Don't block zoom
Use
width=device-width, initial-scale=1and stop there for most sites. Avoid addingmaximum-scale=1oruser-scalable=no, which disable pinch-to-zoom and hurt accessibility for users who need to enlarge text. Letting people zoom is the accessible default, so only restrict scaling if you have a specific, tested reason. - 3
Confirm your CSS is actually responsive
The tag activates responsive behavior but doesn't create it. After adding the tag, check that your layout uses relative units, fluid widths, and media queries rather than fixed pixel widths wider than a phone screen. If content still overflows horizontally, look for fixed-width elements (large images, tables, or containers with a hard
widthin pixels) and let them shrink. - 4
Re-test on a real mobile width
Open the page in your browser's device toolbar (in Chrome DevTools, toggle the device toolbar and pick a phone) or load it on an actual phone. Text should be readable without zooming, and you shouldn't need to scroll sideways. View the page source and confirm exactly one viewport meta tag is present in the
<head>.
Platform-specific steps
Nearly all modern themes already include the viewport tag in header.php via wp_head(). If yours doesn't, add <meta name="viewport" content="width=device-width, initial-scale=1"> to the theme header (use a child theme so an update doesn't overwrite it). Yoast and Rank Math manage titles and descriptions, not the viewport tag, so this is a theme-level fix rather than a plugin setting.
Shopify's Online Store 2.0 themes ship the viewport tag in layout/theme.liquid. If a heavily customized theme is missing it, open layout/theme.liquid in the code editor and add <meta name="viewport" content="width=device-width, initial-scale=1"> inside the <head>, then save.
Wix injects its own viewport tag and doesn't let you replace it, so you generally can't edit this directly. If the mobile view looks wrong, use the Wix mobile editor to adjust the mobile layout instead. A blanket 'missing viewport' flag on a Wix page is often a crawler limitation rather than a real gap.
Squarespace templates include the viewport tag automatically and it isn't editable through the normal editor. If mobile rendering looks off, the issue is usually custom code or CSS you've added, not a missing tag. Review any code injection or custom CSS for fixed pixel widths.
For static HTML, paste the tag into every page's <head> (or a shared include). In Next.js App Router, export a viewport object from layout.tsx: export const viewport = { width: 'device-width', initialScale: 1 }. In the older Pages Router, add the <meta> tag inside a custom <Head> in _app or per page.
Frequently asked
Inside the <head> of your HTML, alongside your other meta tags. Placing it near the top of the head, before your CSS, is good practice. It must be in the head, not the body, and you only need one per page.
Yes. Responsive CSS and the viewport tag do different jobs. Media queries adapt the layout, but without the viewport tag the browser still assumes a ~980px desktop canvas and scales the page down, so your breakpoints never fire correctly on phones. The tag is what tells the browser to use the real device width.
No, in almost all cases. Those values disable pinch-to-zoom, which is an accessibility problem for anyone who needs to enlarge text, and modern browsers may ignore them anyway. Stick with width=device-width, initial-scale=1 and let users zoom.
It can on mobile. Google indexes the mobile version of your page first, and mobile-friendliness is a ranking signal on mobile results. A page without the tag isn't mobile-friendly, so fixing it removes a real ranking obstacle for the majority of your traffic.
View the page source (right-click, View Page Source) and search for name="viewport", or open your browser's DevTools and inspect the <head>. You should find exactly one viewport meta tag. Loading the page in a phone-sized viewport is the quickest way to confirm it's working.
Does your site have this issue?
Run a free, AI-powered audit and we’ll flag this and 150+ other checks in about a minute. No signup.