横屏提示失效的关键在于viewport配置错误、matchmedia未主动校验及safe-area-inset定位缺失；需正确设置viewport标签，用matchmedia实时检测方向，结合env()适配安全区，并避免使用不可靠的vh单位。
移动端横屏时用户常看不到完整提示，不是因为没写提示，而是提示元素被截断、定位偏移或根本没触发显示逻辑——关键在 viewport 配置、matchMedia 主动校验和 env(safe-area-inset-*) 定位兜底。
viewport 标签写错，横屏提示压根不出现
很多页面写了 @media (orientation: landscape) 却没反应，第一排查点就是 <meta name="viewport">。缺了 width=device-width，浏览器会按竖屏宽度渲染横屏视口，媒体查询永远不匹配。
- 必须写：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 禁用
user-scalable=no会导致双击缩放干扰方向判断，尤其在某些安卓 WebView 中 - 别用
width=375这类固定值，否则横屏时orientation: landscape可能因视口未重算而失效
只靠 orientation 媒体查询，提示文案常延迟或漏显
@media (orientation: landscape) 不是实时响应旋转动作，而是在浏览器完成重排后才重新计算，通常有几十毫秒延迟。更糟的是，它只看“逻辑宽度是否大于高度”，不关心地址栏是否收起——真机上常见提示闪一下又消失。
- 用
window.matchMedia('(orientation: landscape)')主动查状态，比监听orientationchange更可靠（后者在 iOS 12+ 已废弃） - 首次加载也要手动检查：
if (mql.matches) { showLandscapeTip() } - 加节流防抖：用
resize事件监听 +setTimeout延迟 100ms 再执行提示逻辑，避开抖动期
fixed 提示框在横屏下跑偏或被系统 UI 吃掉
移动端 fixed 元素在横屏时定位失准，根本原因是 visual viewport 和 layout viewport 处理不一致，尤其在 iOS 地址栏收起/弹出过程中。写死 top: 20px 在横屏下可能直接贴顶，用户完全看不到。
- 改用
top: env(safe-area-inset-top)+padding-top微调，兼容 iOS 安全区 - 避免
bottom: 0，改用bottom: env(safe-area-inset-bottom)，防止被虚拟导航键遮挡 - 加
transform: translateZ(0)强制 GPU 加速，减少 Safari 渲染闪动
提示文案被截断或字号暴增，本质是单位选错
100vh 在 iPhone 14 横屏下只剩约 390px，常导致提示框被截；4vw 字号在横屏时翻倍，文字糊成一团。这些不是布局问题，是单位基准突变没兜底。
- 提示容器高度别用
100vh，改用min-height: 100%+html, body { height: 100% }+overflow-y: auto - 字号统一走
clamp(14px, 2.5vw, 16px)，锁死区间，避免横屏时被拉伸 - 内边距用
rem或px，别混vh，比如padding: 0.5rem 1rem比padding: 2vh 4vw稳得多
真正卡住横屏提示的，往往不是 CSS 写得不够多，而是没意识到 matchMedia 要手动初始化、env() 要配合 safe-area-inset、以及 vh 在横屏下根本不可信——这些细节在模拟器里全看不见，非真机连测三次以上没法验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
