= Page zoom
{title2=$z$}
<Page zoom> changes a browser page's layout scale by changing the physical size associated with a <CSS pixel>. The browser can consequently fit fewer layout units into the available display area and recompute line wrapping and other width-dependent layout. <Pinch zoom>, represented by the <visual viewport> scale, magnifies an already laid-out view instead.<CSSOM View Module by World Wide Web Consortium>[§2.2, Zooming: page zoom affects initial viewport size while visual scale acts as a magnifying glass]{ref}
For an illustrative fixed device width of 800 physical pixels, suppose the initial <device pixel ratio> is $r_0=2$. The width corresponds to 400 <CSS pixels>. At page-zoom multiplier $z=2$, with other scaling held fixed, each layout pixel spans four device pixels, so the available width is 200 <CSS pixels>:
$$
r=zr_0,\qquad W_{\mathrm{CSS}}=\frac{W_{\mathrm{device}}}{zr_0}.
$$
A box declared as `width: 100px` still has that declared width, but its physical display width increases. A percentage-width box or a line of text can respond to the changed containing width instead.
The <device pixel ratio> API includes the current <page zoom> when comparing a layout pixel with an output-device pixel. A scale caused by <pinch zoom> is tracked separately. Reading the ratio alone therefore does not reveal every magnification affecting what a user sees.<CSSOM View Module by World Wide Web Consortium>[Window.devicePixelRatio algorithm, CSS pixel size at current page zoom; VisualViewport scale]{ref}
These equations describe a uniform idealized mapping with fixed display geometry. Browser chrome, available viewport area and extra transforms can change a concrete measurement. The central distinction is which coordinate scale changes: layout is recomputed at a different CSS-to-device mapping under <page zoom>.
Back to article page
