JavaScript 浏览器 Screen Orientation API 检测横竖屏怎么做-js教程-PHP中文网

screen.orientation api 可精准检测和监听屏幕方向，通过 screen.orientation.type 获取当前方向（如 "portrait-primary"），用 addeventlistener("change") 监听旋转事件，兼容性需降级处理，且锁定方向需用户手势触发。

直接用 screen.orientation api 可以实时检测和监听屏幕方向，比监听 window.resize 更精准、更语义化。

获取当前屏幕方向

通过 screen.orientation.type 获取当前方向类型，返回值是字符串：

"portrait-primary"：竖屏正向（手机正常握持）
"portrait-secondary"：竖屏反向（手机倒置）
"landscape-primary"：横屏主方向（Home 键在右，常见于 iPhone）
"landscape-secondary"：横屏次方向（Home 键在左）

注意：部分安卓设备可能只区分 "portrait" 和 "landscape"，但标准接口仍返回上述四值之一。

监听方向变化

使用 screen.orientation.addEventListener("change", handler) 监听旋转事件：

screen.orientation.addEventListener("change", () => {
  console.log("当前方向：", screen.orientation.type);
  if (screen.orientation.type.includes("landscape")) {
    // 横屏逻辑
  } else {
    // 竖屏逻辑
  }
});

该事件在用户旋转设备后触发，比 resize 更可靠——不会因软键盘弹出或缩放误触发。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

兼容性与降级处理

不是所有浏览器都支持 screen.orientation（如 Safari 旧版本、部分桌面浏览器）。建议先检测：

if ("orientation" in screen && screen.orientation) {
  // 使用 Screen Orientation API
} else {
  // 降级为 window.matchMedia 或 resize + innerWidth/innerHeight 判断
  const isLandscape = window.innerWidth > window.innerHeight;
}

也可用 window.matchMedia("(orientation: landscape)") 做轻量 fallback，但它依赖 CSS 媒体查询，不反映真实设备朝向，仅作参考。

主动锁定屏幕方向（需用户手势触发）

调用 screen.orientation.lock() 可尝试锁定方向（例如全屏视频时）：

document.querySelector("#lock-btn").addEventListener("click", async () => {
  try {
    await screen.orientation.lock("landscape");
  } catch (err) {
    console.warn("锁定失败：", err.message);
  }
});

注意：必须在用户手势（如 click/tap）回调中调用，且部分浏览器（如 iOS Safari）不支持锁定，会静默失败。