I'm adapting a small HTML/CSS/Javascript driven web magazine as an iApp for the iPad with the great mobile framework PhoneGap. Everything works great, except the orientation change from portrait to landscape mode.
I use the following Javascript code in the header of the index.html (portrait):
var isiPad = navigator.userAgent.match(/iPad/i) != null;
var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
function updateOrientation() {
if (isiPad || isiPhone) {
switch (window.orientation) {
case 90:
window.location = "index_landscape.html";
break;
case -90:
window.location = "index_landscape.html";
break;
}
}
}
with the following body tag:
<body onorientationchange="updateOrientation();">
If I rotate the iPad to landscape mode, it doesn't change to index-landscape.html.
Does anybody know where the problem is? Isn't it possible to change the HTML file, while changing orientation within the PhoneGap framework? With other words, can I only use one HTML file (index.html) with PhoneGap and have to use CSS for the orientation change?
If I check out the app as a website with the iPad Safari browser, the orientation change works properly.
Thanks for any help!