Implementing Mobile Web Pinch Zoom Directly with JavaScript

To implement Pinch Zoom on mobile web, you must directly analyze the basic touch coordinate data provided by the browser. JavaScript only provides the location where a touch occurs and does not automatically recognize gestures, so developers must implement the gesture detection logic themselves.

Implementation Principles Based on TouchEvent

To implement pinch zoom, utilize the touchstart, touchmove, touchend, and touchcancel events. Track touch objects through the changedTouches property of each event, and calculate the Euclidean distance between two fingers using the clientX and clientY coordinates. If the distance between the two fingers increases, it is judged as zoom-in; if it decreases, it is judged as zoom-out, and the scale value of the target element is adjusted accordingly.

Blocking Default Behavior and State Management

To enable custom pinch zoom functionality, you must block the browser's default zoom feature. Call preventDefault() in the touchmove event when touches.length > 1, or apply touch-action: none in CSS to block the default UX. Additionally, remove touch objects from the array based on their identifier when a touch ends to maintain consistency in multi-touch state.

Center Point Correction and Precision Enhancement

For a natural UX rather than simple zooming, calculate the zoom center point (centerX, centerY) and correct the translateX and translateY values. Set transform-origin to left top and adjust the scale value in increments of 0.02 according to the finger movement distance to implement smooth zoom-in/zoom-out. This provides a natural gesture experience in UIs requiring precise manipulation, such as seat booking or drawing applications.