= Layout viewport
{title2=$(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.<CSSOM View Module by World Wide Web Consortium>[Viewports and Zooming, distinction between layout and visual viewport]{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.<CSSOM View Module by World Wide Web Consortium>[§2.2, page zoom versus visual viewport scale]{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.
Back to article page
