横屏与竖屏适配需 viewport、css 媒体查询、javascript 三者协同：viewport 必设 width=device-width 和 initial-scale=1.0；媒体查询应组合 orientation 与 min-aspect-ratio 或 max-height；js 须用 matchmedia 监听并首次手动检查，避免 orientationchange；布局用 flex/grid 显式切换主轴，优先使用 dvh/dvw 单位。
横屏与竖屏适配不是“加个@media就能好”，而是 viewport、CSS 媒体查询、JavaScript 监听三者必须对齐，缺一不可。单独依赖 orientation 查询在 iOS Safari 和新版 Chrome 中大概率失效。
viewport 标签写错，后面全白忙
所有适配的前提是 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 必须写对。
- 漏掉
width=device-width：浏览器按桌面宽度（如 980px）渲染，@media (orientation: landscape)根本不会触发 - 不加
initial-scale=1.0：iOS Safari 会强制缩放，导致100vh计算失准，横屏时内容被截断 - 别写死
width=375或用 JS 动态改 meta —— 这类操作在多数浏览器中已被忽略或无效
@media (orientation: …) 单独用很危险
单纯靠 @media (orientation: portrait) 或 @media (orientation: landscape) 容易漏触发，尤其在折叠屏半开、地址栏展开/收起时。
- orientation 只看宽高比，不感知 UI 状态变化，比如 iPhone 横屏但 URL 栏弹出，视口高度突变，但 orientation 仍为 landscape
- 更稳妥的写法是组合条件：
@media (orientation: landscape) and (min-aspect-ratio: 1280/720)，或直接响应高度：@media (max-height: 480px) and (min-width: 640px) - 避免混用
min-width和orientation：同一设备旋转时window.innerWidth不变，min-width断点根本不会重新计算 - 横屏下
100vh可能只剩 390px（如 iPhone 14），优先用100dvh，降级方案是min-height: 100%+html, body { height: 100% }
JavaScript 必须用 matchMedia，别碰 orientationchange
window.orientation 已废弃，orientationchange 事件在 iOS 15+ 和 Android Chrome v79+ 中行为不稳定，快速旋转可能跳过回调。
- 正确做法：
const media = window.matchMedia('(orientation: landscape)');+media.addEventListener('change', ...) - 首次加载必须手动检查：
if (media.matches) { /* 初始化横屏逻辑 */ }，否则页面刚打开就横屏时会漏处理 - 需要重排 DOM、切换 class、调整根字号等操作，都得放在 change 回调里，且建议包裹
requestAnimationFrame避免布局抖动 - 别只监听一次 —— 要确保监听器在页面生命周期内持续有效，尤其 SPA 页面路由切换后需重新绑定
Flex/Grid 布局翻转时容易踩的坑
flex-direction 不会自动适应方向，flex-direction: column 在横屏下仍是竖排，必须显式切换；而 margin 方向固定，会导致间距错乱。
- 统一用
gap替代margin：它会随主轴方向自动切换为横向/纵向间距 - 删掉子项上的
margin-bottom、margin-right等固定方向边距，防止和gap叠加 - 如果竖排后文字和图标贴太近，问题常出在
align-items: stretch拉高了所有子项，加align-items: flex-start对齐顶部即可 - Grid 布局中，
grid-template-columns和grid-template-rows需配合媒体查询分别定义，不能指望 auto-fit 自动翻转
最常被忽略的是：横竖屏切换后，vw/vh 单位会因地址栏伸缩产生跳变，100vw 可能瞬间超出屏幕宽度引发横向滚动条；这问题在真机上才明显，开发阶段用 DevTools 模拟器看不出。务必在真实设备上测三次以上，尤其注意输入框聚焦后地址栏收起的瞬间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
