Frontend is a free bonus on CodeMentor AI β the main product is Python. Register to save your progress and unlock all 290 Frontend lessons + 1,000+ Python lessons.Sign up β free
TaskAdd a viewport meta tag with width=device-width and initial-scale=1 to the existing document. Keep the title, charset, and body unchanged.
The viewport meta tag (or your site looks broken on phones)
50 XP5 minFREE
Theory
Why phones zoom out of your site
Mobile browsers default to a 980px-wide layout viewport because in 2007 most sites were desktop-only and that width matched the typical resolution. Without a viewport meta tag, your responsive 320px-wide design gets squished into 980px then scaled down, and the user sees a tiny version of a desktop site.
<meta name="viewport" content="width=device-width, initial-scale=1" />
This says: "Use the device's actual screen width as my layout width, and start at 100% zoom."
Things people get wrong
- `user-scalable=no` β disables pinch-zoom. Never do this. Users with low vision need to zoom. Apple's HIG and Android's a11y guidelines both flag it as a violation.
- `maximum-scale=1` β same problem.
- `minimum-scale` β same.
Bonus: viewport-fit=cover
On notched phones (iPhone X+, Android with cutouts), viewport-fit=cover lets your background extend into the notch area. Combine with env(safe-area-inset-top) CSS to safely place content inside the safe area.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
Live preview