横屏适配需用@media (orientation: landscape)与@media (min-aspect-ratio: 1280/720)双重判断，禁用orientationchange事件，改用matchmedia监听；width避免100vw改用100%或100dvw；viewport加text-size-adjust:100%防字体缩放。
横屏时布局崩了，怎么用媒体查询精准捕获旋转事件
纯靠 window.orientation 或监听 resize 会漏判、误判，尤其在 iOS Safari 和部分安卓 WebView 中。真正可靠的方式是结合 @media (orientation: landscape) 与 @media (min-aspect-ratio: 1/1) 双重判断——前者识别系统上报的朝向，后者从宽高比兜底，避免 Chrome 某些版本 orientation 不触发的问题。
- 不要只写
@media (orientation: landscape)，iOS 15+ 在快速旋转时可能延迟触发或跳过 - 加一层
@media (min-aspect-ratio: 1280/720)（按你目标横屏最小分辨率设）能覆盖 orientation 失效场景 - 避免用
max-width/min-width替代 orientation，它们响应的是视口尺寸，不是设备朝向——折叠屏展开、分屏模式下会误伤
CSS 里写死了 width: 100vw，横竖屏切换后内容被切掉
100vw 在 iOS Safari 横屏时会包含地址栏高度（即使已隐藏），导致实际可渲染宽度变小，内容溢出或错位。这不是 bug，是 Safari 对 viewport 的特殊处理逻辑。
- 改用
width: 100%+ 父容器overflow-x: hidden更稳妥 - 如果必须用视口单位，优先选
100dvw（dynamic viewport width），它自动排除 UI 栏；但注意 Android Chrome 100 以下不支持 - 测试时务必真机操作：模拟器常忽略地址栏高度变化，Safari 开发者工具里的“旋转”按钮也不完全等价于物理旋转
JavaScript 监听 orientationchange 为什么没反应
orientationchange 事件在 iOS 13+ 已被废弃，且安卓大部分浏览器从未支持。现代方案应监听 resize + 主动比对 window.innerWidth 和 window.innerHeight，再结合 screen.orientation.type（如有）交叉验证。
- 别写
window.addEventListener('orientationchange', ...)，它在绝大多数新环境里根本不会触发 - 用
matchMedia('(orientation: landscape)')的addEventListener（注意是media，不是orientationchange）才是标准做法 - 首次加载时也要手动执行一次匹配逻辑，否则页面直出横屏会错过初始状态
- 注意
screen.orientation在 iframe 里可能被禁用（feature-policy或Permissions-Policy限制）
横屏下字体突然变小，viewport meta 设置踩了什么坑
<meta name="viewport" content="width=device-width, initial-scale=1"> 在横屏时若未锁定缩放，某些安卓浏览器会自动缩小文字以适配宽度，导致阅读困难。这不是 CSS 问题，是 viewport 解析策略差异。
- 加上
maximum-scale=1.0, user-scalable=no能阻止自动缩放，但会牺牲可访问性——更优解是用text-size-adjust: 100%强制保持字体相对大小 - 避免
width=375这类固定值，它会让横屏时 viewport 宽度远超屏幕，引发双滚动条 - 部分国产浏览器对
viewport-fit=cover解析异常，如果用了刘海屏适配，需额外加env(safe-area-inset-*)fallback
旋转适配真正的复杂点不在写多少媒体查询，而在于同一台设备上 Safari、Chrome、微信内置浏览器对 orientation、resize、dvh 的行为根本不一致——得靠组合判断，还得留一手运行时降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
