Viewport
A viewport is the visible region through which a browser or graphical interface displays a document or content.
Math for Web Design
The viewport is the visible area of a browser window in which a web page is rendered.
- How it is used
- Anchors responsive sizing, DOM measurement, pointer interaction, and breakpoint decisions to the visible browser area.
- How deep it goes
- Defines axes and units, then works through CSS sizing, dynamic mobile heights, DOM rectangles, and pointer-coordinate conversions.
- Examples
- Uses a full-screen hero, viewport-scaled headings, a cursor-following tooltip, responsive margins, and mobile full-screen overflow fixes.
- What you can do after
- Apply it via CSS viewport units and browser coordinates to size, measure, and position responsive interface elements.
CSS in Depth, Second Edition
A viewport is the framed area of a browser window in which a web page is visible, excluding browser interface controls.
- How it is used
- Defines responsive lengths for viewport-filling heroes, mastheads, and orientation-resistant elements.
- How deep it goes
- Defines original and newer viewport units, explains orientation behavior and trade-offs, and notes scrollbar and keyboard caveats.
- Examples
- Uses a 90vmin square, a full-height hero image, and lvh-versus-svh masthead sizing.
- What you can do after
- Apply viewport-relative units to size responsive elements and choose large or small viewport behavior for mastheads.
Tiny CSS Projects
A browser viewport is the visible rectangular area through which a web page is rendered.
- How it is used
- Frames responsive SVG graphics inside a loading screen.
- How deep it goes
- Defines frame sizing and overflow, then distinguishes viewport dimensions from viewBox positioning and scaling.
- Examples
- Uses a scanning loader, a 100-percent-wide SVG, a 300-pixel frame, and a 710-by-300 viewBox.
- What you can do after
- Apply via SVG width and height attributes to create a responsive frame for contained graphics.
Related concepts
- fixed positioningused by · Fixed positioning is a CSS positioning mode that removes an element from normal flow and positions it relative to the viewport or an established containing block during scrolling.
- getBoundingClientRectused by · getBoundingClientRect is a DOM method that returns an element's size and position relative to the viewport.
- viewport unitused by · The CSS vw unit is a viewport-relative length equal to one percent of the viewport width.
- media queryused by · A media query is a CSS conditional rule that applies styles when specified media types or presentation-environment features match.
- clientXmeasured by · clientX is a MouseEvent or Touch property giving a contact's horizontal position relative to the browser viewport.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.