移动端H5横竖屏提示不能依赖orientationchange事件，应监听resize事件，结合screen.orientation.type（portrait-primary等）和宽高比实时判断方向，并首次加载手动检测、添加防抖；对不支持环境降级为innerWidth/innerHeight比值判断，同时确保viewport配置正确。
移动端 H5 的横竖屏提示不能只靠 orientationchange 事件，它在 iOS Safari（尤其 15+）和多数 WebView 中已不可靠——常漏触发、延迟、甚至返回恒定值。真正稳定的做法是监听 resize，结合 screen.orientation.type 和宽高比实时判断，并主动提示用户。
用 resize + screen.orientation 实时检测方向
视口尺寸变化才是布局适配的真实信号。监听 resize 并辅以 screen.orientation.type，能覆盖绝大多数场景（Safari 16.4+、Chrome 38+、Firefox 22+）：
- 添加防抖（如 100ms），避免连续 resize 触发多次重排
- 首次进入页面必须手动执行一次检测，不能只等事件触发
-
screen.orientation.type返回值有四个：portrait-primary、portrait-secondary、landscape-primary、landscape-secondary，可据此区分正/倒置横竖屏 - 对不支持
screen.orientation的老旧浏览器，降级为window.innerWidth / window.innerHeight比值判断（比值 > 1.2 基本可判为横屏）
横竖屏提示 UI 的实现要点
提示层要轻量、不遮挡核心内容，且能自动隐藏：
- 用固定定位的半透明蒙层 + 图标文字组合，例如「请将手机横过来」+ 旋转动画图标
- 仅在竖屏状态显示，横屏时立即
display: none或移除 class - 加 CSS 过渡（如
opacity 0.2s ease），避免闪现突兀 - 对 iOS 用户特别注意：若设备开启了「锁定竖排方向」，
screen.orientation可能始终返回portrait-primary，此时需依赖宽高比兜底
viewport 配置是前提，不是可选项
没有正确的视口设置，方向检测再准也白搭：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">-
viewport-fit=cover是全面屏（iPhone X 及以后、安卓刘海屏）必需项，否则安全区域会留白或挤压 - 禁用缩放（
user-scalable=no）可防止用户误操作导致提示层错位或失效 - 搭配
<meta name="apple-mobile-web-app-capable" content="yes">提升 PWA 场景下的行为一致性
避免常见坑：旋转容器方案慎用
用 transform: rotate(90deg) 强制视觉横屏看似简单，但问题明显：
- 坐标系翻转，所有 touch/click 事件位置错乱（尤其 Canvas、WebGL、游戏引擎）
- 输入框聚焦后软键盘弹出会触发二次 resize，逻辑容易失控
- 部分安卓 WebView 在 rotate 后无法正确触发
focus或滚动 - 真正需要强制横屏的应用（如视频、游戏），应优先尝试
screen.orientation.lock('landscape')（需 HTTPS + 用户手势触发），失败后再降级为提示引导
