Page zoom ($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.^[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: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.^[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.