使用JavaScript检测设备的横竖屏状态

能者

要使用JavaScript检测设备的横竖屏状态，可以使用`window.orientation`属性或`window.matchMedia()`方法。

1. 使用`window.orientation`属性：

[JavaScript] 纯文本查看 复制代码

function checkOrientation() {
  if (window.orientation === 0 || window.orientation === 180) {
    // 竖屏状态
    console.log("设备处于竖屏状态");
  } else if (window.orientation === 90 || window.orientation === -90) {
    // 横屏状态
    console.log("设备处于横屏状态");
  }
}

// 当设备的屏幕方向改变时触发
window.addEventListener("orientationchange", function () {
  checkOrientation();
});

// 页面加载完成时检查一次屏幕方向
checkOrientation();

2. 使用`window.matchMedia()`方法：

[JavaScript] 纯文本查看 复制代码

function checkOrientation() {
  if (window.matchMedia("(orientation: portrait)").matches) {
    // 竖屏状态
    console.log("设备处于竖屏状态");
  } else if (window.matchMedia("(orientation: landscape)").matches) {
    // 横屏状态
    console.log("设备处于横屏状态");
  }
}

// 当设备的屏幕方向改变时触发
window.addEventListener("orientationchange", function () {
  checkOrientation();
});

// 页面加载完成时检查一次屏幕方向
checkOrientation();

以上代码中，`checkOrientation()`函数用于检测设备的横竖屏状态。通过判断`window.orientation`属性的值或使用`window.matchMedia()`方法来匹配媒体查询字符串`(orientation: portrait)`和`(orientation: landscape)`，以确定设备的方向。在屏幕方向改变时，通过监听`orientationchange`事件来触发检测函数，并在页面加载完成后立即检查一次屏幕方向。