如何在 iOS 上使用 Phonegap 正确检测方向变化？

Question

我在下面寻找 JQTouch 参考资料时发现了这个方向测试代码。这在移动 Safari 上的 iOS 模拟器中可以正常工作，但在 Phonegap 中无法正确处理。我的项目遇到了与杀死此测试页面相同的问题。有没有办法在 Phonegap 中使用 JavaScript 来感知方向变化？

window.onorientationchange = function() {
  /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
    left, or landscape mode with the screen turned to the right. */
  var orientation = window.orientation;
  switch (orientation) {
    case 0:
      /* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
         in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
      document.body.setAttribute("class", "portrait");

      /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events"  */
      document.getElementById("currentOrientation").innerHTML = "Now in portrait orientation (Home button on the bottom).";
      break;

    case 90:
      /* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the
         body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
      document.body.setAttribute("class", "landscape");

      document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the left (Home button to the right).";
      break;

    case -90:
      /* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the
         body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
      document.body.setAttribute("class", "landscape");

      document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the right (Home button to the left).";
      break;
  }
}

Answer 1

这就是我所做的：

function doOnOrientationChange() {
    switch(window.orientation) {  
      case -90: case 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
}
  
window.addEventListener('orientationchange', doOnOrientationChange);
  
// Initial execution if needed
doOnOrientationChange();

---

2019 年 5 月更新： window.orientation 是一项已弃用的功能，大多数浏览器不支持根据 MDN。 orientationchange 事件与 window.orientation 关联，因此可能不应该使用。

Answer 2

我使用 window.onresize = function(){ checkOrientation(); }
在 checkOrientation 中，您可以使用 window.orientation 或 body 宽度检查
但想法是，“window.onresize”是最跨浏览器的方法，至少对于我有机会测试的大多数移动和桌面浏览器来说是这样。

Answer 3

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
  // you're in LANDSCAPE mode
}

Answer 4

我对 iOS 和 Phonegap 也很陌生，但我可以通过添加事件监听器来做到这一点。我做了同样的事情（使用您引用的示例），但无法使其工作。但这似乎可以解决问题：

// Event listener to determine change (horizontal/portrait)
window.addEventListener("orientationchange", updateOrientation); 

function updateOrientation(e) {
switch (e.orientation)
{   
    case 0:
        // Do your thing
        break;

    case -90:
        // Do your thing
        break;

    case 90:
        // Do your thing
        break;

    default:
        break;
    }
}

您可能会幸运地搜索 PhoneGap Google Group 术语“方向”。

我读到的关于如何检测方向的一个例子是 Pie Guy：(game ，js 文件）。它与您发布的代码类似，但像您一样......我无法让它工作。

需要注意的是： eventListener 对我有用，但我不确定这是否是一种过于密集的方法。到目前为止，这是唯一对我有用的方法，但我不知道是否有更好、更简化的方法。

---

更新修复了上面的代码，现在可以使用了

Answer 5

虽然这个问题仅涉及 PhoneGap 和 iOS 的使用，并且已经得到解答，但我可以为 2019 年使用 JS 检测屏幕方向的更广泛的问题添加几点：

1. window.orientation属性 已弃用，并且 Android 浏览器不支持。有一个较新的属性提供有关方向的更多信息 - screen.orientation。但它仍处于实验阶段，iOS Safari 不支持。因此，为了获得最佳结果，您可能需要结合使用两者： const angle = screen.orientation ？ screen.orientation.angle : window.orientation.

2. 正如 @benallansmith 在 他的评论，window.onorientationchange事件在window.onresize之前触发，所以你不会得到屏幕的实际尺寸，除非你在orientationchange事件之后添加一些延迟。

3. 有一个 Cordova 屏幕方向插件 用于支持较旧的移动浏览器，但我相信现在没有必要使用它。

4. 还有一个 screen.onorientationchange 事件，但它已弃用，不应使用。添加只是为了答案的完整性。

在我的用例中，我不太关心实际方向，而是关心窗口的实际宽度和高度，这显然会随着方向而变化。因此，我使用了 resize 事件来避免处理 orientationchange 事件和实现窗口尺寸之间的延迟：

window.addEventListener('resize', () => {
  console.log(`Actual dimensions: ${window.innerWidth}x${window.innerHeight}`);
  console.log(`Actual orientation: ${screen.orientation ? screen.orientation.angle : window.orientation}`);
});

注意 1：我在这里使用了 EcmaScript 6 语法，请确保将其编译为 ES5 if需要。

注意2：window.onresize事件也会被触发当虚拟键盘切换时，而不仅仅是当方向改变时。

Answer 6

在使用 orientationchange 事件时，我需要超时才能获取页面中元素的正确尺寸，但 matchMedia 工作正常。我的最终代码：

var matchMedia = window.msMatchMedia || window.MozMatchMedia || window.WebkitMatchMedia || window.matchMedia;

if (typeof(matchMedia) !== 'undefined') {
  // use matchMedia function to detect orientationchange
  window.matchMedia('(orientation: portrait)').addListener(function() {
    // your code ...
  });
} else {
  // use orientationchange event with timeout (fires to early)
  $(window).on('orientationchange', function() {
    window.setTimeout(function() {
      // your code ...
    }, 300)
  });
}

Answer 7

我相信正确的答案已经发布并被接受，但是有一个我自己经历过的问题以及其他一些人在这里提到的问题。

在某些平台上，窗口尺寸（window.innerWidth、window.innerHeight）和 window.orientation 属性等各种属性将不会更新当事件 "orientationchange" 触发时。很多时候，window.orientation 属性在触发 "orientationchange" 后的几毫秒内是未定义（至少在 Chrome 中是这样） iOS）。

我发现处理此问题的最佳方法是：

var handleOrientationChange = (function() {
    var struct = function(){
        struct.parse();
    };
    struct.showPortraitView = function(){
        alert("Portrait Orientation: " + window.orientation);
    };
    struct.showLandscapeView = function(){
        alert("Landscape Orientation: " + window.orientation);
    };
    struct.parse = function(){
        switch(window.orientation){
            case 0:
                    //Portrait Orientation
                    this.showPortraitView();
                break;
            default:
                    //Landscape Orientation
                    if(!parseInt(window.orientation) 
                    || window.orientation === this.lastOrientation)
                        setTimeout(this, 10);
                    else
                    {
                        this.lastOrientation = window.orientation;
                        this.showLandscapeView();
                    }
                break;
        }
    };
    struct.lastOrientation = window.orientation;
    return struct;
})();
window.addEventListener("orientationchange", handleOrientationChange, false);

我检查方向是否未定义，或者方向是否等于上次检测到的方向。如果其中一个为真，我会等待十毫秒，然后再次解析方向。如果方向是正确的值，我将调用 showXOrientation 函数。如果方向无效，我会继续循环检查函数，每次等待十毫秒，直到方向有效。

现在，我会为此制作一个 JSFiddle，就像我通常做的那样，但是 JSFiddle 并没有为我工作，并且我对它的支持错误已关闭，因为没有其他人报告同样的问题。如果其他人想将其变成 JSFiddle，请继续。

谢谢！我希望这有帮助！

Answer 8

这就是我所做的：

window.addEventListener('orientationchange', doOnOrientationChange);

function doOnOrientationChange()
{
      if (screen.height > screen.width) {
         console.log('portrait');
      } else {
         console.log('landscape');
      }
}

Answer 9

我发现这段代码可以检测设备是否处于横向，在这种情况下添加一个启动页面，显示“更改方向以查看网站”。它适用于 iOS、Android 和 Windows 手机。我认为这非常有用，因为它非常优雅，并且避免为移动网站设置横向视图。
该代码运行良好。唯一不完全令人满意的是，如果有人以横向视图加载页面，则启动页面不会出现。

<script>
(function() {
    'use strict';

    var isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };
    if (isMobile.any()) {
        doOnOrientationChange();
        window.addEventListener('resize', doOnOrientationChange, 'false');
    }

    function doOnOrientationChange() {
        var a = document.getElementById('alert');
        var b = document.body;
        var w = b.offsetWidth;
        var h = b.offsetHeight;
        (w / h > 1) ? (a.className = 'show', b.className = 'full-body') : (a.className = 'hide', b.className = '');
    }
})();
</script>

HTML：

Answer 10

if (window.DeviceOrientationEvent) {
    // Listen for orientation changes
    window.addEventListener("orientationchange", orientationChangeHandler);
    function orientationChangeHandler(evt) {
        // Announce the new orientation number
        // alert(screen.orientation);
        // Find matches
        var mql = window.matchMedia("(orientation: portrait)");

        if (mql.matches)  //true
    }
}

Answer 11

以下内容对我有用：

function changeOrientation(){
switch(window.orientation) {
case 0: // portrait, home bottom
case 180: // portrait, home top
 alert("portrait H: "+$(window).height()+" W: "+$(window).width());       
 break;
          case -90: // landscape, home left
          case 90: // landscape, home right
        alert("landscape H: "+$(window).height()+" W: "+$(window).width());
            break;
        }
    }

 window.onorientationchange = function() { 
            //Need at least 800 milliseconds
            setTimeout(changeOrientation, 1000);
        }

我需要超时，因为 window.orientation 的值不会立即更新

Answer 12

我正在 PhoneGap 中为 iPhone 创建 jQTouch 应用程序。我已经和这个问题斗争了好几天了。我已经多次看到建议的事件监听器解决方案，但就是无法让它工作。

最后我想出了一个不同的解决方案。它基本上使用 settimeout 定期检查主体的宽度。如果宽度为 320，则方向为纵向，如果宽度为 480，则方向为横向。然后，如果自上次检查以来方向发生了变化，它将触发纵向填充功能或横向填充功能，您可以在其中为每个方向执行您的操作。

代码（注意，我知道代码中有一些重复，只是还没有费心去修剪它！）：

// get original orientation based on body width
deviceWidth = $('body').width();
if (deviceWidth == 320) {
    currentOrientation = "portrait";
}
else if (deviceWidth == 480) {
    currentOrientation = "landscape";
}

// fire a function that checks the orientation every x milliseconds
setInterval(checkOrientation, 500);

// check orientation
function checkOrientation() {
    deviceWidth = $('body').width();
    if (deviceWidth == '320') {
        newOrientation = "portrait";
    }
    else if (deviceWidth == '480') {
        newOrientation = "landscape";
    }
    // if orientation changed since last check, fire either the portrait or landscape function
    if (newOrientation != currentOrientation) {
        if (newOrientation == "portrait") {
            changedToPortrait();
        }
        else if (newOrientation == "landscape") {
            changedToLandscape();
        }
        currentOrientation = newOrientation;
    }
}

// landscape stuff
function changedToLandscape() {
    alert('Orientation has changed to Landscape!');
}

// portrait stuff
function changedToPortrait() {
    alert('Orientation has changed to Portrait!');
}