The viewport check: why a page without one looks tiny on a phone
A page without a viewport meta tag opens on a phone as a shrunken desktop page: tiny text, pinch to read, sideways scrolling. Anticode's design gate refuses to publish a page that doesn't carry one. It's labelled “Fits phones” in the checks, and every page from the design engine includes the tag already.
Why phones zoom out without it
When smartphones arrived, almost no website had been designed for a screen that small. So mobile browsers made a compromise: unless told otherwise, they lay a page out as if the screen were a desktop window, commonly around 980 pixels wide, then shrink the result to fit. Old sites stayed usable, if fiddly. The viewport meta tag is how a page opts out of that compromise and says “I'm built for this screen, lay me out at its real width”.
Without it, the media queries a responsive design depends on never fire on a phone, because as far as the layout is concerned the screen is desktop-sized. A page can have a perfect mobile stylesheet and still show the desktop version, scaled down to an unreadable size. That's the most common cause behind “my website isn't responsive on my phone” when the CSS looks right.
The tag, part by part
Here is the tag Anticode's design engine writes into the head of every page:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- width=device-width
- Lay the page out at the width of the device's screen in CSS pixels, so phone-sized media queries apply.
- initial-scale=1
- Start at normal zoom rather than shrinking the page to fit.
- viewport-fit=cover
- On phones with rounded corners or a notch, use the whole screen; the content column keeps its side padding clear of the screen edges.
Just as important is what it leaves out. It doesn't set user-scalable=no or a maximum-scale, so visitors can still pinch to zoom. Blocking zoom is a common accessibility mistake, and people with low vision rely on it.
What the gate checks
The mobile viewport meta tag check looks for a meta element named viewport in the document that's about to be published. If there isn't one, publishing stops with a message that every design check must pass, naming “fits phones”, and the advice to add a viewport meta tag. The check runs on the server, on pages and on model-written apps alike, so a page edited outside the builder by the CLI or an agent is held to the same rule.
What the tag doesn't do
Passing this check means the page asks to be laid out at phone width. It doesn't mean the layout then works at that width. That depends on the CSS. Anticode's design-engine pages carry their own small-screen rules: on a site with separate pages the header wraps so navigation moves onto its own scrolling row below the logo, on a one-page site the header links give way to the logo and main button on the narrowest screens, split sections stack, and form fields use a 16px font size so phones don't zoom in when someone taps one. For app builds, when Cloudflare's headless browser is available, Anticode opens each new app at phone and laptop widths, takes screenshots and fixes what it sees; see self-review in a headless browser.
It's still worth testing on a real phone before launch, ideally more than one size. The guide on testing a website on mobile walks through what to look for, and the design background is in mobile-first web design.
Limits
- Presence only. The gate checks that a viewport tag exists. It doesn't read its content, so a tag with an odd value, or one that disables zoom, would still pass.
- Not a layout test. Overflowing tables, tiny tap targets or text that's too long for a small screen aren't caught by this check.
- One of several basics. The gate also requires a language, a title, visible focus, reduced-motion support and image text; see the design gate for the full list.
Questions people ask
Why does my site look zoomed out on my phone?
Usually because the page has no viewport meta tag, so the phone lays it out at desktop width and shrinks it. Anticode pages include the tag, and the design gate refuses to publish a page without it.
Does passing the mobile viewport meta tag check mean my site is responsive?
No. It means the browser will use the phone's real width. Whether the layout works at that width depends on the page's CSS.
Can visitors still zoom on Anticode pages?
Yes. The tag doesn't disable zoom or set a maximum scale.