HTML5 中 orientationchange 事件已废弃且不可靠，应改用 screen.orientation.change 事件；若不支持则降级为 resize + 宽高比判断，并注意权限、用户交互时机及环境配置。
HTML5 中无法可靠监听 orientationchange 事件来判断设备方向 —— 它已被废弃、不触发、或行为不一致，尤其在 iOS 13+ 和现代 Android 上基本失效。
为什么 orientationchange 现在不能用了
这个事件从未是标准规范的一部分，只是早期 iOS Safari 的私有实现。现在它：
-
orientationchange在 Chrome / Firefox / Edge 中从不触发 - iOS 13 起 Safari 默认禁用该事件（即使启用也只在特定 WebView 场景下偶发）
-
window.orientation属性已废弃，返回值不可靠（如 iPadOS 始终返回0） - 系统级横竖屏切换不再强制触发该事件，尤其当「旋转锁定」开启时
替代方案：用 screen.orientation + change 事件
这是当前唯一标准化、跨浏览器支持的设备方向检测方式（Chrome 38+、Firefox 66+、Safari 16.4+、Edge 79+）。
- 依赖
screen.orientation对象，其type属性返回"portrait-primary"、"landscape-primary"等字符串 - 监听
screen.orientation.addEventListener('change', ...)，比轮询更高效 - 注意：首次访问需用户手势触发（如点击后才能启用监听），否则会报
SecurityError - iOS Safari 要求页面在
https下运行，且不能在 iframe 中调用（除非显式声明allow-orientation-lock）
let handleOrientation = () => {
const type = screen.orientation?.type || 'unknown';
console.log('当前方向:', type);
if (type.includes('landscape')) {
document.body.classList.add('landscape');
} else {
document.body.classList.remove('landscape');
}
};
// 必须在用户交互后注册（例如按钮点击）
document.getElementById('init-btn').addEventListener('click', () => {
screen.orientation.addEventListener('change', handleOrientation);
handleOrientation(); // 立即读取初始状态
});
降级方案：监听 resize + 宽高比判断
当 screen.orientation 不可用（如老版 iOS 或 WebView），可结合 window.innerWidth/window.innerHeight 和阈值判断方向，虽不精确但稳定。
立即学习“前端免费学习笔记（深入）”；
- 不要只比大小（
width > height），因为折叠屏、分屏模式、缩放会导致误判 - 建议用宽高比 + 最小尺寸双条件：例如
width / height > 1.2 && width > 600 - 加防抖（
setTimeout），避免 resize 频繁触发 - 该方法无法区分
portrait-primary和portrait-secondary（即上下颠倒）
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
const w = window.innerWidth;
const h = window.innerHeight;
const isLandscape = w / h > 1.3 && w > 500;
document.body.classList.toggle('landscape', isLandscape);
}, 100);
});
真正要注意的兼容性陷阱
很多开发者卡在第一步：以为加个事件监听就能用，结果连日志都不打印。核心障碍其实是权限和上下文：
- Android WebView 必须在
WebSettings.setJavaScriptEnabled(true)且启用setAllowContentAccess(true)后才允许访问screen.orientation - iOS WKWebView 默认屏蔽
screen.orientation，需在 native 层调用webView.configuration.preferences.setValue(true, forKey: "allowOrientationLock") -
screen.orientation.lock()是受策略限制的 API，仅限全屏、焦点窗口、且需用户手势后调用，否则静默失败 - 不要在
DOMContentLoaded里直接监听change，此时screen.orientation可能为null（尤其刚加载页面时）
设备方向不是“开箱即用”的功能，它依赖运行环境授权、用户交互时机和明确的降级路径。没走通，大概率不是代码写错了，而是没过权限关或没等对时机。
