Javascript resize events on scroll - mobile

Question

I am trying to create a website for mobile devices. I have a “resize” event tied to a window that should rearrange the elements when the mobile device is rotated (portrait ↔ landscape). On iPhone and Samsung Galaxy SII, the event fires when I scroll down the page, and this is bad.

Any suggestions?

Answer 1

Use the onOrientationChange event and the window.orientation property.

Also see this answer .

Here is a link to the test page .

Answer 2

Load the width of the viewport, and when resizing, return false if the width remains 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; } });