The Viewport
The viewport is the visible area of the browser window — and without the viewport meta tag, mobile browsers lie about its width to fake desktop rendering.
- Explain what the viewport is and why mobile browsers historically misreported it
- Write the viewport meta tag and explain what each part does
- Describe the difference between the visual viewport and the layout viewport
Every responsive design technique depends on one assumption: that the browser tells CSS the correct width of the screen. On desktop that assumption is always true. On mobile it was, for years, a lie — and understanding why is the fastest way to understand why the viewport meta tag is the first line of any responsive stylesheet.
What the viewport is
The viewport is the rectangular region of the browser window where the page is
rendered. When you resize a desktop browser window, the viewport shrinks and grows
with it. CSS viewport units (vw, vh) and media query breakpoints all measure
this region.
On a desktop browser, the viewport width matches the window width. A window that is
1280px wide reports a viewport of 1280px, and a max-width: 1280px container fills
it exactly. Simple.
The mobile viewport problem
When smartphones arrived in the mid-2000s, the web was built for wide desktop screens. The iPhone's original browser made a pragmatic decision: rather than render a 375px slice of a desktop page — leaving most content off-screen — it pretended the screen was 980px wide, zoomed out to fit everything, and let users pinch to zoom into the parts they wanted to read.
This made legacy sites usable. It also made mobile-first CSS impossible. A media
query like @media (max-width: 600px) never fires on a device that tells CSS it is
980px wide, even if the physical screen is only 375px.
The fix is a single HTML tag.
The viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">Place this inside the <head> of every page. It does two things:
width=device-width— tells the mobile browser to report the actual physical pixel width of the screen, not a fake desktop width. A 375px screen now reports 375px to CSS.initial-scale=1— sets the zoom level to 1:1 when the page first loads, so content is not zoomed in or out by default.
Without this tag, media queries designed for small screens are ignored on mobile. With it, the browser and your CSS speak the same language about how wide the screen is.
The viewport meta tag is not CSS — it lives in HTML and controls the browser's rendering environment before any stylesheet runs. Think of it as configuring the canvas before you paint it.
Visual viewport vs layout viewport
Developers sometimes use "viewport" to mean two different things, which can be confusing:
- Layout viewport — the coordinate space that CSS uses to lay out the page. This
is what
width=device-widthsets, and it is what your media queries measure. - Visual viewport — the portion of the layout viewport currently visible on screen. When a user pinch-zooms in, the visual viewport shrinks (fewer CSS pixels are visible) but the layout viewport stays the same width.
For writing responsive CSS, the layout viewport is what matters. The visual viewport becomes relevant when you are building something like a map or a canvas that needs to respond to pinch-zoom events, which is a JavaScript concern, not a CSS one.
Avoid adding user-scalable=no to the viewport meta tag. It prevents users from
zooming, which is a significant accessibility barrier — people with low vision
rely on pinch-zoom. The WCAG guidelines require that content can be resized up to
200% without loss of functionality.
Where to go next
With the viewport configured correctly, mobile browsers report accurate widths and your media queries will fire at the right sizes. Next: Media Queries — the syntax for applying CSS conditionally based on viewport width and user preferences.
Lab — Layout Challenge
Build a two-column blog page layout and a card grid using Grid for the page structure and Flexbox for the component interiors — no floats, no absolute positioning tricks.
Media Queries
Media queries let you apply CSS conditionally based on viewport width, screen resolution, or user preferences — the foundation of responsive layouts.