使用Phonegap在事件触发前检测屏幕方向变化

Question

我正在使用PhoneGap为Android、iOS和Windows Phone开发一个应用程序。 我有一个包含图表的页面，如果用户将设备旋转到横向方向，我想在全屏模式下显示它。

问题是整个应用程序必须被锁定在竖屏方向上，因此横屏只能在该图表页面上使用。

我有两种可能性：

---

1）在整个应用程序中授权横/竖屏方向。 如果用户在图表以外的任何其他页面上，并将设备放在横向方向上，则取消旋转并保持竖屏模式。

我认为我必须有一种方法来在这些事件之前捕获事件：

window.addEventListener("orientationchange", orientationChange, false);
window.addEventListener("resize", resize, false);

---

2) 将整个应用程序锁定在纵向方向。如果用户在图形页面上，添加一个按钮，允许将此页面旋转到横向以显示图形，并在完成后返回纵向模式。

我发现这只有对于Android有用：设置屏幕方向

---

那么，有没有一种方法可以实现这些可能性之一？

谢谢

- gaepi

---

不，我已经继续前进了。但如果你有任何建议，我仍然很感兴趣。 - gaepi

你尝试过下面的答案吗？ - Ahmed Assaf

不好意思，我现在没时间，但我会尽力而为。谢谢。 - gaepi

Answer 1

window
    .matchMedia('(orientation: portrait)')
    .addListener(function (m) {
        console.log('a');
    });

window.addEventListener('resize', function () {
    console.log('b');
});

window.addEventListener('orientationchange', function () {
    console.log('c');
});

// https://github.com/gajus/orientationchangeend
viewport.on('orientationchangeend', function () {
    console.log('c');
});

这些事件将按字母顺序触发。

- Gajus

Answer 2

解决iOS问题：

在您的JavaScript文件中输入此函数。

function shouldRotateToOrientation (rotation) {
switch (rotation) {
        case 0:     
          if(condition){
             return true;
          }else{
             return false;}
        case 90:
          return false;
        case -90:
          return false;
        case 180:
          return false;
    }
}

这个函数覆盖了Cordova库中的内置函数。

- Ahmed Assaf