= Pinch zoom
{title2=$s$}
<Pinch zoom> magnifies a browser's visual view of a page while leaving its layout scale unchanged. The specification describes this through the <visual viewport> scale factor, which acts like a magnifying glass over the <layout viewport>. A pinch gesture is a common way to control the scale, but the same visual magnification can be triggered through other interface behavior.<CSSOM View Module by World Wide Web Consortium>[§2.2, Zooming, visual-viewport scale and note on pinch gestures]{ref}
For example, suppose the device shows 800 physical pixels across, with <device pixel ratio> $r=2$ and no initial visual magnification. The visible width is then 400 <CSS pixels>. At a visual scale $s=2$, the same device width displays only 200 <CSS pixels> of that existing layout. The user can pan across the enlarged page. A paragraph laid out at a given CSS width does not acquire a new layout width merely because it is viewed through the magnification.
In this simple uniform mapping, a layout length $\ell$ spans
$$
\ell_{\mathrm{device}}=rs\ell
$$
device pixels. For $\ell=100$ <CSS pixels>, $r=2$ and $s=2$, the displayed span is 400 device pixels. Additional transforms or browser interface geometry require their own accounting.
<Page zoom> instead changes the physical size of a layout <CSS pixel> and can affect layout and the reported <device pixel ratio>. <Pinch zoom> does not redefine that ratio in the same way. Combining the two scale factors silently can therefore produce incorrect pointer positions, image-resolution choices or measurements.<CSSOM View Module by World Wide Web Consortium>[§2.2 and Window.devicePixelRatio algorithm; VisualViewport scale attribute]{ref}
Back to article page
