Phonegap-如何在启用自动旋转的同时防止屏幕旋转？

Question

我在谷歌群组上发现了别人的问题并转发，我也遇到了类似的问题：

---

我的应用需要所有内容都是竖屏的，但播放视频时除外。在iOS上，当视频播放被传递给Quicktime播放器时，我希望视频能够以横向模式播放。目前，视频只能以竖屏模式播放，因为它似乎继承了来自PhoneGap应用程序的竖屏设置。我的解决方案可能是将Phonegap.plist更改为“自动旋转”，但然后我想使用JavaScript捕获旋转变化并在应用程序的每个页面中防止旋转变化，除了视频播放。这听起来可行吗？还有其他方法可以强制某个应用程序页面的横向方向吗？ 谢谢！

---

我尝试了启用自动旋转的以下操作，但没有成功：

$(document).ready(function(){
  document.addEventListener('orientationchange', function(e) { e.preventDefault(); }, false);
});

- Vincent

---

你能更具体地描述你的环境吗？我看到iPhone、JavaScript、Android，甚至不确定你在指哪个平台。 - citizen conn

我猜 Vincent 正在使用 Phonegap 库工作，他只需要编写一次代码，就可以获得 Phonegap 支持的 IOS、Android 等平台的构建版本。 - success_anil

成功的Anil是正确的。我计划为iPhone和Android构建应用。但是，在这个阶段，只有iPhone的解决方案就足够了。我正在使用HTML5、jQuery和jQtouch。 - Vincent

你可能需要编写一个自定义插件来呈现一个允许方向更改的UIViewController。我不知道Android的过程是什么。 - peterp

你能链接到原始的 Google Groups 问题吗？这将帮助我们在那里监视它，以防它得到答案。谢谢。 - Bill the Lizard

我刚在另一个线程中讨论过这个问题：https://dev59.com/vVrUa4cB1Zd3GeqPgx00#7010010 - Andreas Louv

Answer 1

$(window).bind("orientationchange", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)"
    });
});

这是一种有风险的方式，但我认为这是唯一的方法。

或者你可以绑定到窗口大小调整事件。

$(window).bind("resize", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)"
    });
});

我之前写了一个小脚本：它修复了iOS Safari中的多重调整大小回调错误以及安卓系统中的非/晚/早触发方向更改错误。(1)有时候它不会触发，有时候在浏览器改变宽度和高度之前触发，有时候在之后触发？很奇怪！

if (!(/iphone|ipad/gi).test(navigator.appVersion)) {
    $(window).unbind("resize").bind("resize", function() {
        $(window).trigger("orientationchange");
    });
}

如果不是iPhone或iPad，您会在窗口上触发orientationchange事件。

因此，当您将任何函数绑定到调整大小时，通过orientationchange进行。

请参见：http://jsfiddle.net/aalouv/sABRQ/1/

- Andreas Louv

---

你如何将这个内容整合到你的文件中？这个是不是只需要放在我的index文件的JS部分？请告诉我，谢谢！ - nate8684