I was using a function triggered by resize to dynamically adjust the layout of my page, which I use to make sure my page looks good when users expand/reduce their address bars on mobile. But now I found that sometimes resize would also be triggered when user zoom in or out using two fingers or double taps, in which case I don't want the function related to resize event to be triggered.
Is there a way to detect whether the resize event is triggered by zooming?
First of all you can disable zoom pinching functionality on mobile devices with the scale meta tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
But, if you still want your users to be able to pinch zoom then you can observe the "devicePixelRatio" value for changes. This value actually refer to the device scale:
window.devicePixelRatio