Layout & Principles · Layout & Grids
Viewport
also known as visible area
The viewport is the window through which a user sees a web page, sized to the device's screen. Its dimensions determine what fits above the fold and which responsive breakpoints apply. On mobile, a viewport meta tag tells the browser how to scale the page.
Don't confuse it with
The viewport is the full visible screen area; above the fold is the content within it seen before scrolling. A container sits inside the viewport, and breakpoints react to viewport width.
In the wild
On a phone the viewport is about 390px wide, so a desktop layout must adapt.