0

I am calling two HTML files from JavaScript function I want that when iPad is in portrait mode it should load portrati.html and in landscapde mode it should open ladnscape.html

Using following code it works on browser when we load first time but when we change orientation it does not change the file.

<SCRIPT language="JavaScript">
 if(window.innerHeight < window.innerWidth){
    window.location="Landscape/index.html";
} 
else if (window.innerHeight > window.innerWidth){
    window.location="Potrait/index.html";
}
</SCRIPT>
Ilia Ross
  • 13,086
  • 11
  • 53
  • 88
Ozil
  • 21
  • 2
  • 2
    As per your code it run once when page is load – Hkachhia Nov 09 '12 at 07:09
  • See this may be help you http://stackoverflow.com/questions/5284878/how-do-i-correctly-detect-orientation-change-using-javascript-and-phonegap-in-io – Hkachhia Nov 09 '12 at 07:11
  • This might help you http://stackoverflow.com/questions/3495678/how-to-find-out-if-ipad-is-in-landscape-portrait-mode-in-javascript-jquery – Sree Nov 09 '12 at 07:15
  • but where to define the html file for different orientation? – Ozil Nov 09 '12 at 07:21
  • See this post: http://stackoverflow.com/questions/2740857/ipad-doesnt-trigger-resize-event-going-from-vertical-to-horizontal – andyf Nov 09 '12 at 07:25

1 Answers1

1

Safari on iOS has an event:

window.onorientationchange

You can use that for detecting changes.

window.onorientationchange = function() {
    switch (window.orientation) {
        case 0: // portrait
            window.location = "Portrait/index.html";
            break;
        case 90: // Landscape
            window.location = "Landscape/index.html";
            break;
        case -90: // Other way round
            window.location = "OtherLandscape/index.html";
            break;
    }
}

This only runs since iOS 4. If you're using an older version, you should use the onresize-Event:

window.onresize = function() {
     if(window.innerHeight < window.innerWidth){
         window.location="Landscape/index.html";
     } 
     else if (window.innerHeight > window.innerWidth){
         window.location="Potrait/index.html";
     }
}

Copy-Pasta of your code.

looper
  • 1,929
  • 23
  • 42
  • i tried this code but this is not working. its shows nothing on browser. – Ozil Nov 09 '12 at 07:53
  • Please try to log before the switch and in each case. I don't have an iPad here to check this code. Which iOS are you running? I edited my post to make it more complete. – looper Nov 09 '12 at 08:19