Layout viewport ($(W_L,H_L)$)

The layout viewport is the browser viewport used as a reference for laying out the document. Its dimensions help determine the available layout area and initial containing block. The visual viewport can display a magnified subregion of that layout, so visible width and layout width need not be equal.^[ref]

For an illustrative layout viewport width of 400 CSS pixels, a block filling half of a same-width containing block uses 200 pixels. A fixed-width block declared as width: 600px can instead overflow that region. The viewport's width does not force every element or the whole scrollable document to have that width.

At visual scale two, the user might see only 200 pixels of the existing 400-pixel layout. The half-width block remains 200 layout pixels wide. Increasing page zoom can instead reduce the width available in layout CSS pixels on a fixed physical display, potentially changing wrapping or width-dependent styling. The two operations alter different stages of the geometry.^[ref]

A containing block and a viewport should not be conflated either. Nested elements can size relative to their own containing blocks; the initial document layout has its specified viewport relationship. When measuring a layout, state which viewport or containing block supplied a dimension and whether the reported units are CSS or device pixels. This prevents an overflow measurement, a visible screen region and a layout constraint from being treated as one number.