javascript resize event on scroll - mobile

Question

I'm trying to make a website for mobile. I'm having the "resize" event binded on window, wich 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.

Any suggestions?

Answer 1

Use the onOrientationChange event and the window.orientation property instead.

Also see this answer.

Here link to a test page.

Answer 2

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;
        }
    });