= Visual viewport
{title2=$(v_x,v_y,W_v,H_v,s)$}
The <visual viewport> is the region of the laid-out page currently visible through a browser's view, described by its size, offset and scale. It can show only part of the <layout viewport>, especially during <pinch zoom>. The specification exposes this state through the `VisualViewport` interface.<CSSOM View Module by World Wide Web Consortium>[Viewports and The VisualViewport Interface, size, offset and scale]{ref}
For example, take a layout 400 <CSS pixels> wide on a display mapping two device pixels to each layout pixel. A visual magnification of two can show only 200 <CSS pixels> across the same 800-device-pixel area. Panning changes which interval of the layout is visible without requiring the layout itself to become 200 pixels wide.
A simple horizontal coordinate conversion illustrates the need for both offset and scale. If a point has coordinate $x$ relative to the <layout viewport> and the visual view starts at offset $v_x$, then, with uniform mapping,
$$
x_{\mathrm{device}}=rs(x-v_x),
$$
where $r$ is the <device pixel ratio> and $s$ the visual scale. With $x=150$, $v_x=100$, $r=2$ and $s=2$, the point appears 200 device pixels from the visual view's left edge. Additional transforms and browser geometry need separate treatment.
<Page zoom> can change the physical mapping of layout <CSS pixels>, whereas the <visual viewport> scale is tracked separately. A program placing an overlay or translating an interaction coordinate must therefore identify its coordinate origin and units before combining measurements.<CSSOM View Module by World Wide Web Consortium>[Zooming; VisualViewport offsetLeft and scale; Window.devicePixelRatio]{ref}
Back to article page
