判断横屏竖屏（三种）

在前端开发中，有时需要识别用户设备的横屏和竖屏状态。本文将介绍三种常用的方法来检测设备的方向，并提供实用的示例代码。

方法一：使用window.orientation属性

window.orientation属性可以提供设备当前的方向信息，其返回值为0、90、-90或180，分别表示竖屏正立、横屏向右、横屏向左或者竖屏倒置。我们可以根据这些值来判断设备的方向。

function getOrientation() {
  const orientation = window.orientation;
  if (orientation === 0 || orientation === 180) {
    return 'portrait';
  } else if (orientation === 90 || orientation === -90) {
    return 'landscape';
  }
}

方法二：使用CSS媒体查询

CSS媒体查询可以根据设备的宽度和高度等特性进行样式控制，也可以用于检测设备的横屏和竖屏状态。我们可以根据不同的设备方向来应用不同的样式。

@media screen and (orientation: portrait) {
  /* 竖屏样式 */
}

@media screen and (orientation: landscape) {
  /* 横屏样式 */
}

方法三：使用window.matchMedia方法

window.matchMedia方法可以动态地匹配指定的CSS媒体查询，并返回一个MediaQueryList对象，我们可以通过该对象的matches属性来判断设备是横屏还是竖屏。

function getOrientation() {
  const mediaQuery = window.matchMedia('(orientation: portrait)');
  if (mediaQuery.matches) {
    return 'portrait';
  } else {
    return 'landscape';
  }
}

总结

以上就是三种常用的方法来检测设备的方向。在实际开发中，我们可以根据自己的需求选择其中一种或多种方法。需要注意的是，在某些设备上这些方法可能无法正确识别设备的方向，因此最好进行充分的测试和兼容性处理。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1460