JavaScript resize event on scroll - mobile

Question

I'm trying to make a website for mobile. I'm having the "resize" event bounded on window, which should rearrange elements when the mobile device is turning (portrait <-> landscape). On iPhone and Samsung Galaxy SII, the event is triggered when I'm scrolling down the page, and that's not good.

How can I fix this?

Answer 1

Cache the width of the viewport and on resize return false if the width is still the same.

A small jQuery snippet:

    var cachedWidth = $(window).width();     $(window).resize(function(){         var newWidth = $(window).width();         if(newWidth !== cachedWidth){             //DO RESIZE HERE             cachedWidth = newWidth;         }     });