 Visual viewport

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.^[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,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.^[ref]