📱 Without Viewport, Mobile Shows Desktop Zoomed Out
Mobile browsers assume 980px width. Viewport meta tag sets width to device width. Essential for responsive design.
📝 Basic Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Site</title> </head>
🎯 Advanced Options
<!-- Disable zoom (accessibility issue, not recommended) --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- Maximum zoom allowed --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0"> <!-- Minimum zoom --> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5"> <!-- Viewport fit for notched phones --> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
💡 Why It’s Essential
- Without it: mobile shows zoomed out desktop site
- With it: content fits mobile screen width
- Required for media queries to work correctly
- Google ranks mobile-friendly sites higher
- Essential for responsive design
“Mobile site looked tiny and zoomed out. Added viewport meta tag. Now fits perfectly. Most important meta tag for mobile.”