pinchtozoomin

Pinchtozoomin is a gesture-based user interface feature used on touch-enabled devices and apps. It interprets a two-finger pinch as a command to magnify content, typically increasing its scale so that details become larger.

Implementation relies on detecting two simultaneous touch points, recording their initial separation, and then tracking changes in distance as the fingers move. A scale factor is derived from the ratio of the current distance to the initial distance and is applied to the targeted element, usually via CSS transforms or by adjusting the underlying content zoom.

It is widely used in maps, image viewers, document readers, and web browsers. Platform frameworks provide dedicated support: on mobile platforms, gesture recognition or scale detectors translate two-finger movement into zoom operations; on the web, pointer or touch events and transforms are commonly used to implement pinch-to-zoom behavior.

Two common variants are pinch-to-zoom-in, where the content enlarges as the fingers move apart, and pinch-to-zoom-out, where it shrinks as they come together. The zoom center is typically the midpoint between the two touch points, though some implementations allow the focal point to shift with user intent.

Design considerations include preventing accidental zoom during panning, providing accessible alternatives such as on-screen zoom controls or keyboard shortcuts, and respecting user preferences for reduced motion. Performance, content boundaries, and inertia handling are also important for a smooth experience.

See also: pinch-to-zoom, gesture recognition, touch input, scale gesture detectors.