Unable to load image

u know the pinch zoom on mobile ?

how do u undo it via js ?


use case:

heres what happens currently (on mobile):

1. user sees expandable image

![](https://i.rdrama.net/images/16784800606710851.webp)

2. user click on image to expand it

![](https://i.rdrama.net/images/16784800612016382.webp)

3. users pinches to zoom on image

![](https://i.rdrama.net/images/16784800617413743.webp)

4. user closes the image - page is still zoomed, user must unzoom manually

![](https://i.rdrama.net/images/16784800622519965.webp)

I want it so the page gets unzoomed automatically when user closes the image, is this possible ?

36
Jump in the discussion.

No email address required.

You can use the touchstart event in JavaScript to detect when the user has zoomed in on their smartphone, and then reset the zoom level back to 1 when the expandable image is closed.

The expandImage function creates an overlay element with a semi-transparent background and an image element inside it. When the image is clicked, the overlay is added to the body and the image is displayed inside it.

The touchstart event listener detects when the user has zoomed in on their smartphone, and resets the zoom level back to 1 when this happens.

When the user taps on the overlay to close the expandable image, the overlay is removed from the body and the zoom level is reset back to 1.

:#marppy:

Jump in the discussion.

No email address required.

Link copied to clipboard
Action successful!
Error, please refresh the page and try again.