viewport标签必须含width=device-width，否则@media(orientation:landscape)不触发；该查询仅基于逻辑宽高比且有延迟，应组合min-aspect-ratio或max-height/min-width断点；flex-direction和vh/vw需手动适配，字体用clamp()替代vw；js改用matchmedia监听并检查初始状态。
viewport 标签写错，@media (orientation: landscape) 压根不触发
iOS Safari 和 Android Chrome 都依赖 <meta name="viewport"> 判断方向变化。漏掉 width=device-width，浏览器就按固定宽度（比如 980px）渲染，@media (orientation: landscape) 永远不匹配。
- 常见错误：
width=375这类固定值 —— 视口宽度不变，媒体查询无从重算 - 更隐蔽的问题：JS 动态覆盖了初始
<meta>标签，后续旋转失效 - 推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
@media (orientation: landscape) 单独用基本不可靠
它不是实时响应旋转动作，而是在浏览器完成重排（reflow）后才重新计算，通常有几十毫秒延迟。更关键的是：它只看“逻辑宽度是否大于高度”，不关心物理朝向或地址栏是否展开。
- iOS 15+ 快速旋转可能跳过触发；Android Chrome v79+ 仅读取初始方向，后续旋转不再更新
- 横屏时若地址栏未收起、折叠屏半展开，
window.innerWidth ，<code>orientation: landscape可能根本不匹配 - 稳妥做法是组合判断：
@media (orientation: landscape) and (min-aspect-ratio: 1280/720)或更直接的@media (max-height: 480px) and (min-width: 640px)—— 后者响应真实瓶颈（高度骤减）
flex-direction 不会自动翻转，100vh/100vw 在横屏下极易翻车
CSS 不会因为屏幕旋转就帮你把 flex-direction: column 切成 row。同样，100vh 在 iPhone 14 横屏下只剩 390px，常导致内容被截；100vw 在 iOS Safari 横屏时包含已隐藏地址栏高度，造成溢出。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 降级方案：
min-height: 100%+html, body { height: 100% } - 字体别用
font-size: 4vw—— 横屏暴增，改用font-size: clamp(14px, 2.5vw, 16px)锁死区间 - 按钮等布局切换建议用断点驱动：
@media (min-width: 768px)切flex-direction: row，而非依赖orientation
JavaScript 监听别用 orientationchange，改用 matchMedia
window.addEventListener('orientationchange') 在 iOS 12+ 和所有现代安卓浏览器中已被弃用（2026年7月25日资料确认）。它返回的 window.orientation 值在多数新设备上为 undefined，且无法反映地址栏收起等 UI 变化。
- 正确方式：
const mql = window.matchMedia('(orientation: landscape)');+mql.addEventListener('change', handler) - 必须手动检查初始状态：
if (mql.matches) { /* 横屏逻辑 */ }，否则首次加载不执行 - 配合
window.innerHeight和window.innerWidth做兜底判断更稳，尤其对折叠屏和 WebView 场景
实际兼容横竖屏最麻烦的不是写多少样式，而是得同时盯住三件事：viewport 是否生效、媒体查询是否真被重算、以及视口单位在不同浏览器里到底量的是哪块区域。这些细节一漏，用户一旋转，页面就卡在“看起来像横屏但样式没切”或者“横屏时内容被砍掉一半”的状态里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
