# Missing viewport meta tag in Vanilla JS
> How to fix missing viewport meta tag in Vanilla JS — with the exact fix and copy-paste code.
_Category: Web essentials · Detector `web-essentials` · Check `viewport` · Severity: error_
Without ``, mobile browsers assume a ~980px desktop canvas and shrink the whole page to fit, so text is unreadable and tap targets are tiny. AI scaffolds often generate the component tree but leave the base HTML document untouched, so this one line never gets added. It is the single biggest reason an otherwise-fine page looks broken on a phone.
## The fix for Vanilla JS
Put it in the static `` of every HTML entry point. If you template pages server-side, add it to the shared layout partial.
```html
```
### Steps
1. Open your document head (`index.html`, `app.html`, or your framework’s metadata config)
2. Add ``
3. Reload on a real phone or device-emulation and confirm the layout uses the full width
## How VibeCheck detects it
The `web-essentials` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.
- **Issue string:** `Missing viewport meta tag`
- **Threshold:** No present in the document head
## FAQ
### Should I set `user-scalable=no` or `maximum-scale=1`?
No. Disabling zoom is a WCAG accessibility failure — users with low vision rely on pinch-to-zoom. `width=device-width`, `initial-scale=1` is all you need.
### Does Next.js add the viewport tag automatically?
Next injects a sensible default, but you should declare the `viewport` export explicitly so it is intentional and reviewable. Never hard-code the `` tag in Next’s App Router.
### Why does my media query not work on mobile without this tag?
Without the viewport tag the layout viewport defaults to ~980px, so min-width/max-width breakpoints compare against 980, not the real device width. The tag makes the layout viewport equal the device width.
See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/missing-viewport-meta.md
---
Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-viewport-meta. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt