移动端横屏适配必须显式捕获方向而非依赖sm:断点，因sm:仅匹配宽度（≥640px），无法区分手机横屏与平板竖屏；应通过@media(orientation:landscape)或自定义landscape断点精准控制布局、字体、间距及交互样式，并配合viewport设置与js动态监听。
移动端横屏适配不能只靠 sm: 断点，必须显式捕获横屏状态并叠加处理。
为什么 sm: 不等于横屏
Tailwind 的 sm: 断点（默认 ≥640px）匹配的是视口宽度，不是设备方向。很多手机竖屏时宽度就已达 375–414px，横屏后宽度升至 667–812px —— 确实会触发 sm:，但问题在于：sm: 同时也匹配了平板竖屏、小尺寸桌面等所有 ≥640px 宽度的场景，无法区分“是手机横屏”还是“是平板竖屏”。如果你只用 sm:flex-row，可能在 iPad 竖屏下意外破坏布局。
- iPhone 13 竖屏：390×844 → 视口宽度 390px → 不触发
sm: - iPhone 13 横屏：844×390 → 视口宽度 844px → 触发
sm:，但此时是窄高形态，不适合直接套用桌面级横向布局 - iPad Air 竖屏：820×1180 → 视口宽度 820px → 同样触发
sm:，但它本就是多任务友好尺寸，应保持竖向信息密度
用 @media (orientation: landscape) 显式声明横屏样式
原生 CSS 媒体查询仍是目前最可靠的方式。Tailwind 不内置 landscape: 前缀，但你可以在 tailwind.config.js 中扩展一个自定义断点：
module.exports = {
theme: {
extend: {
screens: {
'landscape': { 'raw': '(orientation: landscape)' },
}
}
}
}
之后就能直接使用 landscape:flex-row、landscape:gap-8 等类名。注意它不带最小宽度限制，纯按方向生效 —— 这正是你需要的。
- 该断点会在任意设备横屏时激活，包括手机、平板、折叠屏展开态
- 它和现有断点正交，可组合使用，例如
sm:landscape:flex-row表示“仅在 ≥640px 且横屏时生效”，适合更精细控制 - 不要覆盖默认
sm的含义；保留语义清晰性，sm:仍代表“小屏以上宽度”，landscape:单独表达“方向”
横屏下常见需调整的样式类型
手机横屏本质是“窄高变宽矮”，视觉焦点压缩，操作区域变局促。重点调以下几类：
-
布局结构：竖屏用
flex-col，横屏改landscape:flex-row，但避免强行铺满整行；建议加max-w-2xl mx-auto控制内容宽度 -
字体与行高：横屏时行宽增大，
landscape:text-base landscape:leading-relaxed可提升可读性，避免单行长文本压迫感 -
间距与留白：竖屏紧凑，横屏可用
landscape:px-6 landscape:py-4扩展内边距，但慎用landscape:gap-12这类大间隔 —— 宽度增加不等于空间富余 -
交互元素尺寸：横屏手指操作区域变窄（高度减小），
landscape:min-h-[60vh]或landscape:pb-20可防止关键按钮被底部系统栏遮挡
别忽略 viewport meta 和系统行为
即使样式写对了，如果页面没正确告诉浏览器“我支持横屏”，iOS/Android 可能强制缩放或禁用方向变更。确保 HTML 中有：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
其中 user-scalable=no 虽常被用于防误触，但它也会阻止用户双指缩放 —— 更稳妥的做法是保留缩放，但用 min-scale=1.0, max-scale=1.0 限定范围，并在 JS 中监听 resize 事件检查 window.matchMedia('(orientation: landscape)').matches，必要时动态补 class。
真正容易被忽略的点是：横屏时软键盘弹出会导致视口高度剧烈收缩（尤其 Android），landscape: 类名不会自动撤销。这类动态变化必须靠 JS 配合，不能全交给 CSS 断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
