如何在 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();

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

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 上测试了代码，它对我来说运行良好。