Viewport
Definition
The visible area of a webpage in the browser window, which changes based on the device and window size.
What is the Viewport?
The viewport is the user's visible area of a webpage. It's essentially the browser window minus any toolbars or scrollbars. On mobile, it's the screen size. On desktop, it depends on how large the browser window is.
Understanding viewport is crucial for responsive design because it determines what users actually see without scrolling.
Viewport on Different Devices
The same website on different devices has different viewports:
| Device | Typical Viewport Width |
|---|---|
| iPhone SE | 375px |
| iPhone 14 | 390px |
| iPad | 768px |
| MacBook Pro 14" | 1512px |
| Desktop monitor | 1920px+ |
The Viewport Meta Tag
Every responsive website needs this in its HTML head:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without this tag, mobile browsers assume your site is designed for desktop and shrink everything down to fit, making it tiny and unreadable.
Viewport Units in CSS
CSS includes units relative to the viewport:
- vw - 1% of viewport width
- vh - 1% of viewport height
- vmin - 1% of the smaller dimension
- vmax - 1% of the larger dimension
These are useful for creating elements that scale proportionally with the screen, like full-height hero sections.
Why It Matters
Responsive design is fundamentally about adapting to different viewports. Every breakpoint, every flexible layout, and every media query is responding to viewport size. Understanding this concept helps you think about design from the user's perspective—what they can actually see at any given moment.