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!
La solution
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;
}
});
Autres conseils
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