The Viewport Meta Tag
Add the viewport meta tag and understand why it is required for responsive layouts to work correctly on mobile devices.
Why the Viewport Meta Tag?
Without the viewport meta tag, mobile browsers render the page at a desktop width (often 980px) and zoom out to fit. This makes text tiny and layouts broken. The meta tag tells the browser to use the device's actual width.
The Tag
Add this inside the <head> of every page. It's required for any responsive design to work correctly.
<meta name="viewport" content="width=device-width, initial-scale=1.0">All lessons in this course
- The Viewport Meta Tag
- Flexbox for Layout
- CSS Grid for Layout
- Media Queries and Mobile-First Development