The Viewport Meta Tag
Add the viewport meta tag and understand why it is required for responsive layouts to work correctly on mobile devices.
The Viewport Meta Tag is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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">width=device-width
width=device-width sets the viewport width to the device's screen width in CSS pixels. On an iPhone 14 (390px wide), this makes the viewport 390px, not 980px.
initial-scale=1.0
initial-scale=1.0 sets the zoom level to 1 when the page first loads. Without it, some browsers may still apply a zoom factor. Together with device-width, this gives you a true 1:1 CSS pixel to device pixel ratio.
CSS Pixels vs Physical Pixels
High-DPI (Retina) screens have a device pixel ratio (DPR) greater than 1. A 390px wide iPhone 14 has 1170 physical pixels (DPR = 3). CSS pixels abstract over physical pixels — your CSS still works in CSS pixels regardless of DPR.
Don't Use user-scalable=no
Some developers add user-scalable=no to disable pinch-to-zoom. Don't do this. It prevents users with visual impairments from zooming in to read content and fails WCAG success criterion 1.4.4.
Viewport Units: vw and vh
1vw = 1% of the viewport width. 1vh = 1% of the viewport height. 100vw and 100vh fill the full viewport. Use them for hero sections and full-screen layouts.
.hero {
width: 100vw;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}dvh — Dynamic Viewport Height
On mobile, 100vh includes the browser chrome (address bar), which can cause content to be cut off. The newer 100dvh (dynamic viewport height) adjusts for visible chrome. Use with a fallback.
.full-screen {
min-height: 100vh; /* fallback */
min-height: 100dvh; /* modern browsers */
}viewport in DevTools
In Chrome DevTools, click the device icon to enter Device Mode and see exactly how your page looks at different viewport sizes. The ruler shows CSS pixels.
content attribute variations
You can also set initial-scale, minimum-scale, and maximum-scale. Keep them at sensible values. Setting minimum-scale=1 without user-scalable=no still allows zoom, which is the accessible approach.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">Viewport and Media Queries
Media queries use the viewport width (the CSS pixel value, not physical pixels). If your viewport is 390px, @media (max-width: 768px) will match. The viewport meta tag makes these breakpoints work correctly on mobile.
Quick Check
What is the purpose of width=device-width in the viewport meta tag?
Recap: The Viewport Meta Tag
Always include in the
. Never disable user scaling. Use vw/vh for viewport-relative sizing. dvh fixes mobile browser chrome issues. This one tag enables all responsive CSS to work on mobile.Frequently asked questions
Is the “The Viewport Meta Tag” lesson free?
Yes — the full text of “The Viewport Meta Tag” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “The Viewport Meta Tag”?
Add the viewport meta tag and understand why it is required for responsive layouts to work correctly on mobile devices. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The Viewport Meta Tag” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The Viewport Meta Tag
- Flexbox for Layout
- CSS Grid for Layout
- Media Queries and Mobile-First Development