推荐以 resize 事件为主、screen.orientation API 为辅检测横竖屏：resize 通过宽高比粗略判断（innerWidth > innerHeight 为横屏），兼容性好；screen.orientation 提供精确方向类型，但需 HTTPS/localhost 且 iOS Safari 支持弱。
可以通过监听 window.orientation（旧标准，部分 iOS 仍支持）或更现代的 screen.orientation API + resize 事件来检测横竖屏切换，并弹出提示。推荐以 resize 为主、screen.orientation 为辅的方式，兼顾兼容性与准确性。
用 resize 事件粗略判断横竖屏
浏览器窗口宽高比变化是横竖屏最通用的信号，尤其在桌面端和多数移动端都可靠：
- 当
window.innerWidth > window.innerHeight→ 视为横屏 - 当
window.innerWidth → 视为竖屏 - 注意：需防抖，避免频繁触发（如旋转动画过程中连续触发）
示例代码：
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
const isLandscape = window.innerWidth > window.innerHeight;
const tip = document.getElementById('orientation-tip');
if (tip) {
tip.textContent = isLandscape ? '? 横屏模式已启用' : '? 请将设备竖放';
tip.style.display = 'block';
setTimeout(() => tip.style.display = 'none', 2000);
}
}, 150);
});
用 screen.orientation 获取精确方向（现代浏览器）
screen.orientation 提供了更语义化的方向信息（portrait-primary、landscape-secondary 等），但需注意：
立即学习“Java免费学习笔记（深入）”；
- 仅在 HTTPS 或 localhost 下可用（部分浏览器限制）
- Android Chrome 和新版 Safari 支持良好；iOS Safari 对
orientationchange事件支持有限，建议降级到resize - 可监听
screen.orientation.onchange，比resize更精准、更早触发
示例补充：
if ('orientation' in screen) {
const updateTip = () => {
const type = screen.orientation.type;
const isLandscape = type.startsWith('landscape');
const tip = document.getElementById('orientation-tip');
if (tip) {
tip.textContent = isLandscape
? '✅ 已切换至横屏'
: '? 建议使用竖屏浏览';
tip.style.display = 'block';
setTimeout(() => tip.style.display = 'none', 1800);
}
};
screen.orientation.addEventListener('change', updateTip);
updateTip(); // 初始化一次
}
添加一个轻量提示 UI（不依赖框架）
在页面底部加一个简洁浮动提示条即可，CSS 示例：
#orientation-tip {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.8);
color: white;
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
z-index: 9999;
display: none;
pointer-events: none;
}
HTML 中插入：<div id="orientation-tip"></div>
兼容性与注意事项
- iOS Safari 不触发
orientationchange事件，必须依赖resize+ 宽高判断 - 某些 Android 浏览器锁定了屏幕方向（如 WebView），
screen.orientation可能只读或不可用 - 不要仅靠
window.orientation（已废弃，Safari 16+ 移除，Chrome 早期弃用） - 如需强制锁定方向，请用
screen.orientation.lock()（需用户手势触发，且仅允许在安全上下文）
