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免费学习笔记（深入）”；
兼容性与降级处理
不是所有浏览器都支持 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）不支持锁定，会静默失败。
