@media (orientation: landscape) 经常不生效主因是 viewport 缺失 width=device-width，导致浏览器无法识别真实视口；需配合 matchmedia 同步监听、叠加断点及使用 gap 替代 margin 才可靠。
@media (orientation: landscape) 为什么经常不生效？
它不是“写上就管用”的媒体查询，失效主因是 viewport 配置缺失或错误。浏览器必须识别设备真实视口尺寸，才能在旋转后重新计算 orientation。漏掉 width=device-width，iOS Safari 和 Android Chrome 都会忽略方向变化——哪怕你写了 @media (orientation: landscape)，也永远不匹配。
常见错误包括：
-
<meta name="viewport" content="width=375">：硬编码宽度，锁死视口，媒体查询无法响应变化 -
<meta name="viewport" content="initial-scale=1">：缺width=device-width，等同于没设 viewport - JS 动态改写
document.querySelector('meta[name="viewport"]').content：初始设置被覆盖，后续旋转不再触发重算
推荐写死这一行：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
window.matchMedia("(orientation: landscape)") 比 CSS 媒体查询更可靠
CSS 的 @media (orientation: ...) 依赖浏览器完成 reflow 后才更新，有几十毫秒延迟；而 window.matchMedia 是同步读取当前状态，且支持事件监听，适合需要即时响应的逻辑（比如切换 flex-direction 或调整 100vh 行为）。
关键点：
- 不要用
window.orientation：Chrome 99+ 已移除，Safari/Firefox 标记为 deprecated，值只反映页面加载时状态 - 监听必须用
mql.addEventListener("change", handler)，不是resize——移动端resize不保证随旋转触发 - 初始化要手动调用一次
handler()，否则首次加载可能没应用对应样式
示例：
const mql = window.matchMedia("(orientation: landscape)");
const handleOrientation = () => {
document.body.classList.toggle("is-landscape", mql.matches);
};
handleOrientation();
mql.addEventListener("change", handleOrientation);
单独用 orientation 媒体查询容易误判，必须叠加断点
它的判定逻辑只是 if (innerWidth > innerHeight)，和传感器无关。这就导致：
- iOS Safari 快速旋转可能跳过触发
- 地址栏未收起时，
innerHeight短暂变小，竖屏也可能被当成横屏 - 折叠屏半展开状态，宽高比接近 1:1，
orientation判定失准
稳妥做法是加物理约束条件：
-
@media (orientation: landscape) and (min-width: 768px)：排除小屏横拍（如手机拍视频）干扰 -
@media (max-height: 480px) and (min-width: 640px)：直接抓“高度骤减”这个更稳定信号 - 避免混用
orientation和min-width单独断点——同一设备旋转时宽度不变，min-width不会触发
flex-direction 切换时 margin 会错乱，gap 才是安全选择
当从 flex-direction: column 切到 row，原来写死的 margin-bottom 会变成横向挤出，破坏对齐。这不是 bug，是 flex 主轴翻转后的自然行为。
正确做法：
- 删掉所有子项上的
margin，尤其禁用margin-bottom+gap叠加 - 统一用
gap: 16px：在row下是横向间距，在column下自动转为纵向间距 - 如果竖排文字和图标贴太近，大概率是
align-items: stretch拉高了容器，加align-items: flex-start对齐顶部即可
别忘了检查颜色对比度——竖屏下 color: #999 在阳光直射屏幕时根本看不清，WCAG AA 要求至少 4.5:1，该换背景就换背景，不能只调文字色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
