What it is
Phone screens are physically narrow, but for a long time most websites were built assuming a much wider desktop screen. To keep those older sites usable, mobile browsers default to quietly pretending the screen is about 980 pixels wide — roughly desktop-sized — then shrinking the whole result down to fit, which is why an unprepared page can look tiny and zoomed-out on a phone until someone pinches to zoom in.
The viewport meta tag is a single line of code, <meta name="viewport" content="width=device-width, initial-scale=1">, that overrides that old default and tells the browser "actually size this page to match the real screen width, at normal zoom." It's what makes a responsive design (one that adapts to different screen sizes) actually take effect on a phone.
Why it matters
Without this tag, a page that was carefully designed to reflow and resize for mobile screens never gets the chance to — the phone renders it as a shrunken desktop layout regardless of how the underlying design was actually built. This is a purely technical, all-or-nothing setting: either the tag is present and correct, or every visitor on a phone sees the wrong layout, no matter how well the rest of the site was designed.
Because more than half of web traffic on most sites comes from phones, this one missing line can affect the majority of visitors before they even start reading.
How to fix it
- View your page's HTML source and check inside the
<head>section for a tag starting with<meta name="viewport". - If it's missing, add
<meta name="viewport" content="width=device-width, initial-scale=1">right inside the<head>section. - If you're using a website builder (Squarespace, Wix, Webflow, WordPress), this is set automatically by the platform — a missing tag here almost always points to a custom code embed overriding it, so check any custom
<head>code you've added. - Avoid adding
maximum-scale=1oruser-scalable=noto this same tag — those additions block visitors from pinch-zooming, which creates a separate accessibility problem. - Load the page on an actual phone (or your browser's mobile preview mode) afterward to confirm it now fills the screen at a readable size instead of appearing zoomed out.