I've analyzed so many cases, and read so many questions here, but unfortunately did not find the response to my question. The problem is related only to mobile versions.

The situation is next: I have a React project( the problem is related to js, but maybe it can be fixed using react) , I added an event listener to resize, to track when the user changes the orientation of his phone. The main concern now is that I cannot track when the user is zooming on the website using two fingers. This event is read by JS as a resize. I need to catch separately when is zooming and when is changing the orientation, to use different functions for each case. How I can do that?

Or maybe I can split them into two different events? It would be even better. I will be very grateful for your help. Thanks in advance)

CodePudding user response：

I think you can try implementing two event listeners.

For orientation:

addEventListener('orientationchange', (event) => { });

And for resize:

addEventListener('resize', (event) => {});

CodePudding user response：

you look at window.devicePixelRatio and zoom in, the pixel density in Chrome and Firefox will increase as you zoom in and decrease as you zoom out. But in Safari it does nothing, as in, it stays the same regardless of zoom. Already there are draft added for the pinch zoom API [https://wicg.github.io/visual-viewport/#dom-visualviewport-scale].

Check is there any polyfill available or not , then it can solve your issue.