如何使用JavaScript启用横竖屏模式并处理对应设备方向逻辑？

一、检测当前设备方向 #

可以通过window.matchMedia()结合CSS媒体查询直接判断当前方向，这是兼容性较好的方案：

// 检测是否处于横屏模式
const isLandscape = window.matchMedia("(orientation: landscape)").matches;

if (isLandscape) {
  console.log("当前为横屏模式");
  // 执行横屏处理逻辑，比如调整布局、加载横屏资源等
  handleLandscapeMode();
} else {
  console.log("当前为竖屏模式");
  // 执行竖屏处理逻辑
  handlePortraitMode();
}

// 示例处理函数
function handleLandscapeMode() {
  document.body.style.backgroundColor = "#e3f2fd";
  // 其他横屏专属操作，比如显示横向导航栏
}

function handlePortraitMode() {
  document.body.style.backgroundColor = "#fff3e0";
  // 其他竖屏专属操作，比如显示竖向菜单
}

也可以使用screen.orientation API（部分现代浏览器支持）：

const orientation = screen.orientation.type;
// orientation值可能是："portrait-primary"、"portrait-secondary"、"landscape-primary"、"landscape-secondary"

if (orientation.includes("landscape")) {
  handleLandscapeMode();
} else {
  handlePortraitMode();
}

二、监听方向变化事件 #

要在用户切换横竖屏时实时触发处理逻辑，推荐使用matchMedia的change事件，比监听resize更精准：

const landscapeQuery = window.matchMedia("(orientation: landscape)");

// 初始检测
checkOrientation(landscapeQuery);

// 监听方向变化
landscapeQuery.addEventListener("change", checkOrientation);

function checkOrientation(query) {
  if (query.matches) {
    handleLandscapeMode();
  } else {
    handlePortraitMode();
  }
}

如果需要兼容更老的浏览器，也可以监听window.resize事件，同时结合方向判断：

window.addEventListener("resize", () => {
  const isLandscape = window.innerWidth > window.innerHeight;
  // 这里用宽高比判断，适合不支持matchMedia的场景
  if (isLandscape) {
    handleLandscapeMode();
  } else {
    handlePortraitMode();
  }
});

三、注意事项 #

• 部分移动设备的浏览器会在横屏时自动缩放页面，可通过meta标签禁用：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
• screen.orientation API在部分iOS浏览器中支持有限，优先使用matchMedia方案
• 避免在方向变化时执行过于繁重的DOM操作，防止页面卡顿

内容的提问来源于stack exchange，提问作者Itam