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();

感谢大家的帮助！这对我所有需要测试的设备都有效！

Answer 2

使用orientationchange。设备的方向更改时将触发该事件。您可以在这里找到更多有关此的信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/orientationchange_event

function detectMobileOrientation() {
    switch(screen.orientation.angle) {  
      case 90:
      case 270:
        alert('landscape' + screen.orientation.angle);
        break; 
      default:
        alert('portrait' + screen.orientation.angle);
        break; 
    }
}
window.addEventListener("orientationchange", detectMobileOrientation);

detectMobileOrientation()

您可以使用此link直接进行测试。我已经在Android 9上测试了代码，对我来说很好用。

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

2 个答案: