Forma saysThe viewport meta tag tells mobile browsers to use the device’s real width instead of faking a desktop.
<meta name="viewport" content="width=device-width,initial-scale=1"> is the one line that makes a page mobile-ready. width=device-width maps CSS pixels to the actual device; initial-scale=1 sets the starting zoom.
Without it, phones pretend to be ~980px wide and shrink everything to fit. Avoid maximum-scale or user-scalable=no — disabling pinch-zoom locks out users who need to enlarge text. Set width and scale, then let people zoom.
Power-ups you unlock
width=device-width maps CSS px to the real device
initial-scale=1 sets the starting zoom
Without it, phones render at ~980px and shrink
Never disable user-scalable — it blocks pinch-zoom
Setting a fixed width=1024 instead of device-width
Boss battleAdd the viewport meta, then experiment with initial-scale values — and note why locking scale would be a mistake.
Example code
<!doctype html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>viewport</title>
</head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
<h1>mobile-ready</h1>
<p>this line is what makes the page use the real device width.</p>
</body></html>