我正在将一个小型的 HTML/CSS/Javascript 驱动的网络杂志改编为 iPad 的 iApp，并使用出色的移动框架 PhoneGap。一切都很好，除了方向从纵向模式变为横向模式。
我在 index.html(纵向)的 header 中使用了以下 Javascript 代码:
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;
}
}
}
带有以下正文标签:
<body onorientationchange="updateOrientation();">
如果我将 iPad 旋转到横向模式，它不会更改为 index-landscape.html。
有人知道问题出在哪里吗？ 在 PhoneGap 框架内改变方向的同时改变 HTML 文件是不可能的吗？ 换句话说，我可以只使用 一个 HTML 文件 (index.html) 和 PhoneGap 并且必须使用 CSS 来改变方向吗？
如果我使用 iPad Safari 浏览器将应用程序作为网站 check out ，方向更改会正常工作。
感谢您的帮助!
最佳答案
我刚刚找到了该问题的其他解决方案。我使用 body onload 函数和 phonegap.js 中的 onDeviceReady 函数来检查方向:
以下 javascript 代码现在可以正常工作:
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("orientationChanged", updateOrientation);
}
function updateOrientation(e) {
switch (e.orientation) {
case 90:
window.location = "index_landscape.html";
break;
case -90:
window.location = "index_landscape.html";
break;
}
}
更新:这在两年多前适用于旧版本的 Phonegap 和 iOS SDK，但根据一些用户的说法，它不再适用。
关于Javascript 方向更改不适用于 iPad 上的 PhoneGap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3547860/