Viewport Meta Tag
Definition
The tag is written as meta name="viewport" content="width=device-width, initial-scale=1" and sits in the head, usually just after the character encoding declaration. The width=device-width part sets the CSS layout width to the width of the device — about 390 CSS pixels on a current iPhone — rather than the 980-pixel default that mobile browsers adopted in 2007 so that desktop-only sites would at least fit on screen. The initial-scale=1 part sets the starting zoom to one hundred per cent, so one CSS pixel maps to one device-independent pixel. Without the tag a phone renders the page as though it were a desktop and then shrinks the whole thing to fit the glass. The tag does nothing by itself: it lets responsive CSS work as intended, and a fixed-width layout still overflows even with the tag in place.
Why It Matters
Leave it out and the page arrives on a phone at roughly a third of its intended size. Body text set at 16 pixels renders at about five or six, the visitor pinches and pans to read a sentence, and taps land on the wrong link. Google's mobile usability checks flag exactly this, and since the mobile rendering is the copy that gets indexed, the page is judged on that failure rather than on how it looks to you. It is also the cheapest fix in mobile web work: one line in the head, no build, nothing to redeploy but the HTML file itself.
How It Works
The browser parses the head, finds the viewport directive and sets the layout viewport before any CSS is applied. Media queries are evaluated against that width, which is why a query written for a min-width of 768 pixels never fires without the tag — the browser believes every device is 980 pixels wide. Values are comma separated, and width and initial-scale are the two that matter. Avoid maximum-scale=1 and user-scalable=no, which disable pinch zoom: that breaks WCAG success criterion 1.4.4 Resize Text, and Safari has ignored the instruction since iOS 10 in any case. Add viewport-fit=cover only when you are also handling the notch area with safe-area-inset padding, or content will slide under the rounded corners.
Real-World Example
Someone uploads a quiz app generated in a chat assistant to 99helpers and shares mobile-quiz.99helpers.site with a study group. On a laptop it is perfect; on every phone the buttons are postage stamps and the answers run off the right-hand edge. The generated HTML shipped without a viewport tag, so the CSS underneath never had a chance. Adding the single meta line to the head and re-uploading the file fixes every device at once, with nothing else touched.
Common Mistakes
- ✕Omitting the tag entirely — exported and generated single-file pages often ship without it, and nothing looks wrong on the laptop you tested on
- ✕Setting user-scalable=no to stop the layout wobbling — it removes pinch zoom from the people who most need it and fails WCAG 1.4.4
- ✕Adding the tag but keeping a fixed pixel width on the outer wrapper — the viewport is now honest and the content still overflows it
Related Terms
Responsive Design
Responsive design is building one page that adapts to whatever screen opens it, using flexible layout and CSS media queries, instead of maintaining separate mobile and desktop versions.
Mobile-First Indexing
Mobile-first indexing means Google crawls and indexes a site using a smartphone crawler, so the mobile version of a page is the version that gets stored and ranked.
WCAG
WCAG, the Web Content Accessibility Guidelines, is the W3C standard that defines what accessible web content is. Its success criteria at Levels A, AA and AAA are what accessibility law and procurement point to.
Text Resize
Text resize is the ability to enlarge the words on a page without losing content or breaking the layout. WCAG sets the bar at 200 per cent, and a related criterion pushes it effectively to 400 per cent.
Generated HTML
Generated HTML is markup produced by a program or a model rather than typed by a person. From a browser's point of view it is indistinguishable from hand-written HTML, and a static host serves it the same way.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →