How to make a page zoomable (resizable)

Question

HTML | CSS | JavaScript -

On most websites you can zoom in, just by putting your finger fingers (2) and dragging out (if on iPhone). Same thing on window you just zoom in with your mouse.

How do you make element (or the body) Zommable (resizable)?

Answer 1

you can add an eventListener for wheel to catch the mouse scroll movement.

for pinch in or out gesture you can catch them using touchstart and touchend.
first catch both the coordinates where the touches are located in. then on the touch end, do the samething then calculate the difference between them to see the pinch direction.
you can also use the touchmove event to make it more interactive