Glossary · Beginner
Viewport
The viewport is the browser area through which a document is laid out and viewed, expressed in CSS pixels for responsive design.
- Published
- Last checked
Definition
The viewport is the area through which a browser presents a document. CSS layout uses viewport dimensions expressed in CSS pixels, which are not necessarily the same as physical device pixels.
Layout and visual viewports
On mobile devices, the layout viewport provides the coordinate space used for layout, while the visual viewport can shrink or move during zoom and when an onscreen keyboard appears. Interfaces anchored to the viewport need testing with both states.
Viewport metadata
The standard viewport meta declaration asks mobile browsers to use the device width as the initial layout viewport. It does not make a fixed layout responsive; CSS still needs flexible sizing, intrinsic wrapping, and content-driven breakpoints.
Accessibility consequences
At 320 CSS pixels or high zoom, ordinary content should reflow without page-level horizontal scrolling. Sticky bars can consume too much of a small visual viewport, and fixed controls can hide focused fields behind the keyboard.
Common failures
- Treating a device model as a permanent breakpoint.
- Hiding overflow instead of fixing the widest component.
- Preventing zoom through restrictive viewport values.
- Testing preset widths without slow resizing or text enlargement.
Review question
Can a person complete the task at 320 CSS pixels, 200% text zoom, and with an onscreen keyboard while every focused control and message remains visible?