javascript - 如何在 jQuery 中正确检测移动设备的方向？

Question

我正在编写一些 jQuery 代码，我想检测移动设备的方向，无论是纵向还是横向。

我已经尝试过 while 语句，但他们不断发送我的测试警报，但无济于事。

我的 jQuery:

function test() {
    if (window.matchMedia("(orientation: portrait)").matches) {
     alert('You are in portrait!');
  }

  else if (window.matchMedia("(orientation: landscape)").matches) {
     alert('You are in landscape!');
  }
}
  test();

目前，它会在您加载到页面后立即运行，以便我可以测试结果。我希望它做的是检测设备是否使用横向并更改一些 CSS(如果是)。问题是，当我将设备转为横向时，它无法正确检测到它，它可以正常检测到它。如果我在设备处于该方向时刷新页面，它会检测到纵向或横向。我想要发生的事情是，一旦我将设备置于横向模式，它就会一直检测到我希望它将 CSS 更改为适合横向的 CSS，当它返回纵向模式时，我希望它更改回原来的CSS。但在这种情况下，为了测试和你们，我希望它在每次更改设备方向时正确发出警报，而不是在我以该方向刷新页面时发出警报。

Answer 1

我实际上只是想出了一种使用 switch 方法的方法。由于某种原因情况-90 || 90:工作不正常所以我只是为每个正确的方向做了一个像这样

function doOnOrientationChange() {
    switch(window.orientation) {
      case 90:
        alert('landscape');
        break;
      case -90:
        alert('landscape');
        break;
      case 0:
        alert('portrait');
        break;
      case 180:
        alert('portrait');
        break;
      default:
        break;
    }
}

window.addEventListener('orientationchange', doOnOrientationChange);

// Initial execution if needed
doOnOrientationChange();

谢谢大家的帮助!这适用于我必须测试的所有设备!