Viewport
The visible area of a web page in the user's browser window.
Definition
The viewport is the rectangular area where web content is displayed. Viewport dimensions vary based on device and browser window size. Responsive design adapts layouts based on viewport dimensions using CSS media queries.
The viewport meta tag controls how pages scale on mobile devices.
Why It Matters
Designing for multiple viewport sizes is fundamental to responsive web design. Content "above the fold" in the initial viewport receives more attention.
Understanding viewport behavior helps diagnose layout issues and optimize content priority.
Examples in Practice
A responsive design uses viewport-based breakpoints at 768px (tablet) and 480px (mobile).
The viewport meta tag with width=device-width ensures proper scaling on mobile devices.
Analytics reveal that 60% of users have viewports under 400px wide, influencing mobile-first design priorities.