Definition
An HTML meta tag that tells mobile browsers to set the layout viewport width to the device screen width instead of a default ~980px virtual canvas, making responsive CSS media queries work correctly on phones.
Why It Matters
Without the viewport meta tag, a mobile-responsive site is useless—the browser simply shrinks a desktop page until the text is unreadable. This single line of code is the “on switch” for the modern mobile web, bridging the gap between design and user reality.
Core Concepts
- Standard Tag:
<meta name="viewport" content="width=device-width, initial-scale=1">- Problem Solved: Mobile browsers initially rendered desktop-width pages scaled down.
width=device-width: Matches layout viewport to physical screen width.initial-scale=1: No default zoom on load.