6

I am doing a web application for android and iPhone. My problem is, i want to do refresh the webpage, when user goes to landscape. Since i'm a beginner in javascript i don't know how to do this. please help me

FreshBits
  • 1,003
  • 4
  • 13
  • 25
  • 2
    There exists an question like this and an answer ;) http://stackoverflow.com/questions/850472/how-do-i-detect-when-the-iphone-goes-into-landscape-mode-via-javascript-is-ther – matzino Jan 13 '12 at 09:52
  • please close this question to avoid duplicates – Murtaza Jan 13 '12 at 10:12

2 Answers2

5

You could use the orientationchange jQuery Mobile event and then do a

window.location.reload();

to refresh the page.

For example:

$(function(){

// Set Inital orientation
// get the initial orientation from window which
// returns 0 for portrait and 1 for landscape
if(window.orientation == 0){
    var ori = "portrait";
}else{
    var ori = "landscape";
}
changeOrientation(ori);

// Orientation Change
// When orientation changes event is triggered
// exposing an orientation property of either
// landscape or portrait
$('body').bind('orientationchange',function(event){
    changeOrientation(event.orientation)
})

// Change the style dependengt on orientation
function changeOrientation(ori){
    // Remove all classes separated by spaces
    $("#orientation").removeClass('portrait landscape');
    $("#orientation").addClass(ori);
    $("#orientation").html("<p>"+ori.toUpperCase()+"</p>");
}

});
Treffynnon
  • 21,365
  • 6
  • 65
  • 98
Johan
  • 35,120
  • 54
  • 178
  • 293
  • I used your code like this, still not works "" – FreshBits Jan 13 '12 at 09:59
  • @yuzi I've updated my code, but i suggest you take a look in to jquery and jquery mobile (which this example is using) – Johan Jan 13 '12 at 10:03
  • 1
    finally i did like this, then it works " window.onorientationchange = function() { var orientation = window.orientation; switch(orientation) { case 0: window.location.reload(); break; case 90: window.location.reload(); break; case -90: window.location.reload(); break; } }" thanks Johan – FreshBits Jan 14 '12 at 04:00
0

You could use a timer and periodically check:

if (window.innerHeight > window.innerWidth) {
    // Redirect code, window.location...
}
Martin Gallagher
  • 4,444
  • 2
  • 28
  • 26