Page keeps reloading when I change iPad orientation from portrait to landscape

Question

I've been googling for days in search of a solution to my problem and had no success. So here I am asking for your help. Many thanks in advance.

The page can be seen HERE!.

The header and sidebars have position:fixed in the style sheet while the value of left is dynamically generated with jQuery. For the header and sidebars to rearrange properly on window resize or zoom, I have added:

/* Reload page on window Resize */
jQuery(window).bind('resize',function(){
    window.location.href = window.location.href;
});

For situations when the window is partially occupied (like pressing [CTRL] + [B], to show bookmarks in Firefox, for instance), I've added:

/* Reload page if window Partially Occupied */
var screen_width = screen.width;
window.onresize = function(){
  if(window_width != screen_width) {
    location.replace(location.href);
  }    
}

Look at the entire code, I hope you will like it.

The PROBLEM:

On an iPad, when I change its orientation from portrait to landscape, the page will continuously reload (with the portrait orientation all is well). I don't think the iPad is broken because I tested on a second one.

Can anyone please tell me what the problem is? And if the same happens on a Galaxy Tab?

Thank you!

Answer 1

The problem:

On an iPad, when I change its orientation from portrait to landscape, the page will continuously reload (with the portrait orientation all is well). I don't think the iPad is broken because I tested on a second one. Can anyone please tell me what the problem is? And if the same happens on a Galaxy Tab?

The answer:

$(window).bind('orientationchange', function (e) {
    switch (window.orientation) {
        case 0:
            //portrait mode
            break;
        case 90:
            //turned to the right
            location.reload();
            break;
        case -90:
            //turned to the left
            location.reload();
            break;
    }
});

Answer 2

Reloading the page on resize looks like a bad practice, you may try using media queries to set a CSS change when the page resize.

to solve this issue, one thing you can try is to follow orientation-change event on iPads and ignore the resize event when the client is iPad.

I think you would need to add JQuery Mobile (JQM) for that. See JQM events on http://jquerymobile.com/test/docs/api/events.html