viewport设置错误导致横屏媒体查询失效，主因是meta标签未正确配置width=device-width、initial-scale=1.0等；需组合orientation与尺寸条件、使用dvh、手动切换Flex/Grid方向，并用matchMedia监听而非orientationchange。
viewport 设置错，横屏根本不会触发
横屏媒体查询不生效，90% 是因为 <meta name="viewport"> 写错了。它不是可选项，而是所有适配的起点。
常见错误包括：width=375 这类固定值、漏掉 initial-scale=1.0、或写了 user-scalable=no 却没配 maximum-scale=1.0 —— iOS Safari 会因此忽略 orientation 判断。
- 必须写成：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"> - 别用 JS 动态改
content值，首次渲染后修改无效 -
width=device-width缺失时，浏览器按桌面宽度（如 980px）计算，@media (orientation: landscape)永远为 false
@media (orientation: landscape) 单独用大概率失效
iOS Safari 和新版 Chrome 对 orientation 的判定非常保守：只看宽高比，不看地址栏是否收起、折叠屏是否半开。用户旋转后，样式没变，往往就是这个原因。
稳妥做法是组合条件：
立即学习“前端免费学习笔记（深入）”；
- 加尺寸限制：
@media (orientation: landscape) and (min-width: 640px) - 或直接响应高度变化：
@media (max-height: 480px) and (min-width: 640px)（横屏时视口高度变小） - 优先用
dvh替代100vh：横屏下100vh可能只剩 390px（iPhone 14），而100dvh始终取可用视口高度 - 降级方案：
html, body { height: 100% }+min-height: 100%，避免内容被截断
Flex/Grid 布局不会自动“翻转”，得手动切方向
flex-direction: column 在横屏下还是竖着排，Grid 的 grid-template-columns 也不会自动改成 rows。指望 CSS 自动适配是误区。
- 横屏时显式切换：
.form-group { flex-direction: row; gap: 16px; } - 表单字段并排需加
flex-wrap: wrap防溢出 - 用
display: grid时，横屏改用grid-template-columns: repeat(2, 1fr)，竖屏回退到grid-template-rows: auto - 注意
transform: rotate(90deg)方案已不推荐：影响焦点、滚动、文本选择，且在折叠屏上行为不可控
用 matchMedia 监听，别碰 orientationchange
orientationchange 在 iOS 15+ 和 Android Chrome v79+ 中已被弃用或跳过事件，尤其快速旋转时完全不触发。
正确监听方式：
- 用
window.matchMedia('(orientation: landscape)')创建媒体查询对象 - 首次加载必须手动检查：
if (media.matches) { /* 初始化横屏状态 */ } - 绑定
change事件，而非orientationchange - 需要动态调整根字号或 class 的逻辑，全放在这回调里执行
字体用 clamp()，别纯靠 vw：横屏下 4vw 可能突然放大一倍，竖屏又缩得太小；clamp(14px, 2.5vw, 18px) 更可控。
