orientationchange事件在现代移动端基本不可靠，应改用resize事件配合screen.orientation.type判断方向，并以innerwidth/innerheight比值为主干逻辑，辅以css媒体查询实现稳定横竖屏适配。
orientationchange 事件在现代移动端基本不可靠，别指望它精准触发横竖屏切换。
为什么 orientationchange 经常不触发或延迟
这个事件依赖浏览器对设备方向传感器的上报，但 iOS Safari（尤其 iOS 15+）和部分 Android WebView 会主动抑制或合并触发——比如锁屏后再解锁、从后台切回、甚至只是快速旋转两次，orientationchange 可能完全静默。更麻烦的是，它不反映实际视口尺寸变化，只反映系统“声称”的方向（window.orientation），而该值在 iOS 上早已被弃用且返回恒定值（0 或 -90）。
- 真机测试时，
orientationchange在 Safari 中大概率漏掉首次旋转 - Chrome for Android 表现略好，但遇到 PWA 或全屏模式仍会失灵
- 依赖
window.orientation判断方向已失效，iOS 返回0即使是横屏
用 resize + screen.orientation 替代更靠谱
视口尺寸变化才是布局适配的真实信号；而 screen.orientation（注意不是 window.orientation）提供当前有效方向信息，且兼容性足够（Chrome 38+、Safari 16.4+、Firefox 22+）。
- 监听
resize事件，再通过screen.orientation.type获取当前方向（"portrait-primary"/"landscape-primary"等） - 加防抖（如 100ms），避免连续 resize 触发多次重排
- 首次进入页面也要手动检查一次
screen.orientation.type，不能只等事件 - 降级方案：若
screen.orientation不可用，退回到比对window.innerWidth > window.innerHeight
window.addEventListener('resize', debounce(() => {
const type = screen.orientation?.type || 'unknown';
if (type.includes('landscape')) {
document.body.classList.add('landscape');
} else {
document.body.classList.remove('landscape');
}
}, 100));
横竖屏 CSS 布局别只靠 JS 控制
纯 JS 切换 class 容易滞后一帧，用户能看到闪动；而且横竖屏下某些元素（比如视频、canvas、fixed 定位）可能需要原生响应式行为。
立即学习“前端免费学习笔记（深入）”；
- 优先用 CSS 媒体查询：
@media (orientation: landscape)和@media (min-aspect-ratio: 1/1)更稳定 - 对关键容器加
transform: rotate(90deg)配合transform-origin是兜底手段，但会影响点击区域，慎用 - 避免在横屏时强行修改
viewport的width，会导致缩放错乱和输入框聚焦异常 - iOS Safari 横屏下软键盘弹出会触发 resize，但方向没变——此时应忽略方向判断，只按尺寸逻辑处理
真正难的不是监听事件，而是区分「用户真的转了屏幕」和「只是窗口尺寸被动变化」。很多 bug 出在把 resize 当成 orientationchange 用，又没做尺寸阈值过滤。建议所有横竖屏逻辑都以 innerWidth / innerHeight 比值为主干，方向 API 仅作辅助校验。
