Fix Viewport Not Device-Width (incorrect_viewport)
Your page has a viewport meta tag, but it sets a fixed pixel width (like width=1024) instead of width=device-width. That forces every phone to render your page on a fixed canvas and shrink it, producing tiny text and horizontal scrolling. Change the tag to width=device-width, initial-scale=1 so the browser matches the real screen size.
What this means
The incorrect_viewport issue is different from a missing viewport tag. Here the <meta name="viewport"> tag exists in your <head>, but its content value hard-codes a numeric width instead of using the keyword device-width. A common bad value looks like <meta name="viewport" content="width=1024"> or <meta name="viewport" content="width=980, initial-scale=1">.
When you specify a fixed width, you tell the browser to lay the page out on a canvas exactly that many CSS pixels wide, no matter what device is viewing it. A 375px-wide phone then has to render your page on a 1024px canvas and scale the whole thing down to fit. The result is text too small to read, tap targets too close together, and usually a horizontal scrollbar. Your CSS media queries also stop matching correctly, because the browser reports a 1024px viewport even on a phone.
The correct value is width=device-width, which maps the layout viewport to the device's actual screen width in CSS pixels, so a phone reports roughly 390px, a tablet roughly 768px, and your responsive styles fire as intended. Pairing it with initial-scale=1 sets the starting zoom to 100% so the page is not zoomed in or out on load.
Why it matters
Google now crawls and indexes with the mobile version of your page (mobile-first indexing became the default for all sites in 2023, and the last desktop-crawled sites were migrated in mid-2024). That means the mobile rendering is the version Google evaluates for ranking, and a fixed-width viewport is one of the clearest signals that a page is not mobile-friendly. It produces the classic mobile problems Lighthouse and the mobile-friendly audits flag: content wider than the screen, text too small to read, and clickable elements too close together.
The user impact is immediate. Visitors on phones land on a shrunken page, pinch and scroll to read, and bounce. That kills conversions regardless of how good your content is, and most searches happen on phones.
There is an answer-engine angle too. The rendering pipelines behind Google AI Overviews, ChatGPT, and Perplexity work from the rendered DOM. A page that renders as a horizontally-overflowing, zoomed-out mess is harder to parse cleanly and reads as low-quality. Getting the viewport right gives you a clean, linear, readable layout that both mobile users and machine readers can consume without fighting the page. It is a one-line fix with an outsized payoff.
How to fix it
- 1
Replace the fixed width with device-width
Find the existing viewport tag in your page's
<head>and change the hard-coded number to thedevice-widthkeyword. The correct, universally-recommended tag is<meta name="viewport" content="width=device-width, initial-scale=1">. Do not set a numericwidth=value like 1024 or 980, and do not addmaximum-scale=1oruser-scalable=no, which disable pinch-zoom and cause a separate accessibility failure. Keep exactly one viewport tag per page and delete any duplicates. - 2
Fix it in the template, not per page
The viewport tag lives in your global
<head>, so fix it once in the master template rather than editing every page. In a theme this is usually aheader.php,head.html,_document, or root layout file. Change it there and it propagates to every URL on the site. After editing, hard-refresh and view source on a few different page types to confirm the corrected tag is present and the old one is gone. - 3
Confirm your CSS is actually responsive
Fixing the viewport tag exposes what your CSS really does. If the layout was built around a fixed 1024px design with pixel widths,
width=device-widthwill now reveal overflow on phones. Add or verify breakpoints with media queries (for example@media (max-width: 600px)), use relative units andmax-width: 100%on images, and give containers percentage,fr, or flex widths instead of fixed pixels. The viewport tag enables responsiveness; your CSS delivers it. - 4
Check for horizontal overflow
Open the page on a real phone or use Chrome DevTools device mode (Ctrl/Cmd+Shift+M) at a 375 to 390px width. If a horizontal scrollbar appears, something is wider than the screen, usually a fixed-width element, an unconstrained image, a wide table, or negative margins. Inspect the elements that extend past the viewport edge, then cap them with
max-width: 100%or wrap wide tables in a scrollable container. - 5
Re-test and request re-crawl
Validate the corrected page in PageSpeed Insights or Lighthouse and re-run the audit here. Once it passes, Google picks up the change on its next crawl; you can nudge it by requesting indexing for a key URL in Google Search Console. Spot-check your most-trafficked page types, such as the home page, a product or post, and a category page, since templates can differ.
Example
<!-- WRONG: fixed pixel width forces phones to render a 1024px canvas and shrink it -->
<meta name="viewport" content="width=1024">
<!-- ALSO WRONG: disables pinch-zoom (accessibility failure) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- CORRECT: match the real device width, start at 100% zoom, allow zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">Replace the fixed-width viewport (top) with the responsive, accessible version (bottom). Keep exactly one viewport tag in <head>.
Platform-specific steps
Yoast and Rank Math do not control the viewport tag; your theme does. Most modern themes already output width=device-width. If yours hard-codes a numeric width, it is in the theme's header.php (classic themes) or added via wp_head. Edit it in a child theme so an update does not overwrite your fix, or use a small functions.php snippet on wp_head to remove and re-add the correct tag. Then confirm via View Source that only one correct viewport tag is present.
Open your theme, go to Edit code, and check the <head> in layout/theme.liquid. Replace any fixed-width viewport tag with <meta name="viewport" content="width=device-width, initial-scale=1">. Most current Shopify themes are responsive out of the box, so this is usually a leftover from a heavily customized or older theme. Save and preview on mobile.
These platforms manage the viewport tag for you and output width=device-width automatically, so you normally cannot and should not override it. If an audit flags this on Wix or Squarespace, it is almost always custom code you or a previous developer injected into the site header. Remove any custom <meta name="viewport"> from the custom-code or header-injection area and let the platform's default tag take over.
For hand-coded sites, put the correct tag directly in the document <head>. In the Next.js App Router, export a viewport object (export const viewport = { width: 'device-width', initialScale: 1 }) instead of hardcoding the tag; in the Pages Router, add the <meta> in _document.js or a per-page <Head>. In plain HTML, ensure exactly one <meta name="viewport" content="width=device-width, initial-scale=1"> sits in <head> on every page or template.
Frequently asked
A missing viewport tag means there is no <meta name="viewport"> at all, so mobile browsers fall back to a roughly 980px desktop canvas. "Viewport not device-width" (incorrect_viewport) means the tag exists but hard-codes a numeric width like width=1024 instead of the device-width keyword. Both break mobile layout; the fix for this one is to change the value to width=device-width, initial-scale=1.
<meta name="viewport" content="width=device-width, initial-scale=1">. width=device-width matches the layout to the device's actual screen width, and initial-scale=1 sets the load zoom to 100%. Avoid adding maximum-scale or user-scalable=no, which disable pinch-zoom and cause an accessibility failure that Google also flags.
A fixed width forces every device to render your page on that exact canvas and then scale it. On a phone that means tiny text, cramped tap targets, and horizontal scrolling, and your responsive media queries stop matching because the browser reports the fixed width instead of the real screen size. device-width adapts to each device so your responsive CSS works everywhere.
Yes. Google indexes and ranks using the mobile version of your pages, and a fixed-width viewport is a core cause of not-mobile-friendly problems like content wider than the screen and text too small to read. Since most searches happen on phones, a page that renders poorly on mobile is at a competitive disadvantage even when the content is strong.
The viewport tag only tells the browser to use the real device width; it does not make a non-responsive layout responsive. If your CSS uses fixed pixel widths, oversized images, or wide tables, those still overflow once device-width is applied. Use media queries, relative units, max-width: 100% on images, and a scroll wrapper for wide tables to eliminate horizontal scroll.
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.