Without <meta name="viewport"> in <head>, mobile browsers render the page as if the screen were 980px and then shrink to fit. Text becomes tiny and users must pinch-zoom to read. One line of code that decides everything.
Why this matters
This is the classic reason a site that looks perfect on desktop is unreadable on mobile. Google has used "mobile-first indexing" since 2015 - it crawls the mobile version as the primary version for indexing and ranking. A page that is not mobile-friendly gets flagged as "Not mobile-friendly" in the Search Console Mobile Usability report and ranks significantly lower.
Direct impact: mobile bounce rate. Mobile visitors landing on an unreadable page leave within seconds. Studies show bounce rates above 70% for non-mobile-friendly pages, vs 30-40% for proper ones - more than doubling lost opportunities.
Since Google enforced mobile-friendliness more strictly in 2018 (Mobile-Friendly Update), sites without viewport dropped dozens of positions. Core Web Vitals also measure on mobile - without proper viewport you cannot pass.
Indirect impact: any traffic from mobile paid ads (Google Ads, Facebook Ads, Instagram) lands on a poor experience and does not convert. Conversion cost (CPA) doubles for paid campaigns.
How to detect
Open the site on a real mobile device. If text looks tiny and requires pinch-zoom to read, no viewport. If the page adapts to the screen, it is in place.
Complementary check: view source and search for name="viewport". Missing means no tag. If present but the value is unusual (like width=980), it is not configured properly.
Third check: open Google Mobile-Friendly Test (https://search.google.com/test/mobile-friendly). Enter the URL and review the report. "Page is not mobile-friendly" usually points to a viewport issue.
Fourth check: in Chrome DevTools (F12) > Toggle Device Toolbar (Ctrl+Shift+M) > pick Galaxy / iPhone. If the page does not adapt to the device size, no viewport.
How to fix
Add this meta tag inside <head> of the theme:
<meta name="viewport" content="width=device-width, initial-scale=1">Meaning: width=device-width tells the browser the page width equals the device width. initial-scale=1 sets the initial zoom to 100% (not zoomed in or out).
Steps by theme type:
Classic theme (PHP): open header.php in the active theme via Appearance > Theme File Editor or via FTP at wp-content/themes/THEME-NAME/. Add the meta inside <head>, ideally before wp_head().
Block / FSE theme (WordPress 6.0+): edit via Appearance > Editor > Templates > Header. Block themes include viewport meta automatically - if missing, a custom theme template may have stripped it.
Commercial theme (Astra, GeneratePress, Kadence): should include the tag by default. If the test fails, a plugin may be removing it. View source and search for viewport - if missing, identify which plugin is responsible.
After the change, purge page cache (W3 Total Cache, WP Rocket, LiteSpeed Cache) so cached pages serve with the tag. Re-test on mobile and in the Mobile-Friendly Test.
Common mistakes
First mistake: width=device-width, user-scalable=no. This prevents users from zooming - hurts accessibility (low-vision users need zoom). WCAG forbids this. Leave user-scalable=yes or omit the property.
Second mistake: hard-coded values. width=320 or maximum-scale=1 constrain the page suboptimally. Use width=device-width, initial-scale=1 - the recommended standard.
Third mistake: viewport added but CSS still fixed-width. If CSS uses width: 980px with no media queries, the page is still not responsive. Viewport tells the browser to use device width; CSS must respond.
Fourth mistake: multiple viewport tags. If the theme adds one and a plugin adds another, the browser uses the first. Confirm only one exists.
Fifth mistake: forgetting to purge cache. WP Rocket and LiteSpeed serve cached HTML - after a theme change, purge cache so the update propagates.
Verifying the fix
Re-run Google Mobile-Friendly Test (https://search.google.com/test/mobile-friendly). It should report "Page is mobile-friendly". Check on a real mobile device. In Search Console > Mobile Usability the error count should drop over 4-6 weeks. In Performance, mobile CTR and clicks should rise.
<meta name="viewport" content="width=320"> instead of the standard means a plugin altered it. Disable plugins one at a time to identify the culprit.