如何用CSS适配横屏和竖屏切换-css教程-PHP中文网

@media (orientation: landscape) 必须依赖正确的 viewport 设置（含 width=device-width）才生效，否则完全不触发；它仅依宽高比判断、有 reflow 延迟，且易受地址栏、折叠屏干扰，推荐用 window.matchmedia 监听并叠加 min-width 等条件增强可靠性。

如何用css适配横屏和竖屏切换

viewport 标签写错，`@media (orientation: landscape)` 就不会触发

这个媒体查询不是“独立生效”的开关，它依赖浏览器对视口的正确识别。缺了 width=device-width，iOS Safari 和 Android Chrome 都会按固定宽度（比如 980px）渲染，横屏时 orientation 永远不匹配。

常见错误包括：

漏掉 width=device-width —— 最常被忽略，直接导致媒体查询失效
写了 width=375 或 width=768 —— 视口宽度被锁死，方向变化后尺寸不变，查询无从重算
JS 动态改写 <meta name="viewport"> —— 初始设置后又被覆盖，后续旋转完全失联

推荐写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

只靠 `orientation` 媒体查询，横屏样式大概率延迟或漏掉

它不是实时监听旋转动作，而是在浏览器完成重排（reflow）后才重新计算，通常有几十毫秒延迟。更麻烦的是：它只看“逻辑宽是否大于高”，不关心物理朝向、地址栏是否收起、折叠屏是否半展开。

例如：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

iOS 15+ 快速旋转可能跳过触发
Android Chrome v79+ 仅读取初始方向，后续旋转不再更新
桌面模拟器的 “Rotate” 按钮 ≠ 真机旋转，测试必须用真机

稳妥做法是组合判断：@media (orientation: landscape) and (min-aspect-ratio: 1280/720)，或更直接地用尺寸断点：@media (max-height: 480px) and (min-width: 640px) —— 后者响应真实瓶颈（高度骤减），比 orientation 更可靠。

`100vh`、`flex-direction`、`font-size: 4vw` 这些值在横竖屏切换后最容易翻车

CSS 不会自动兜底，所有依赖视口基准或主轴方向的属性都得显式干预：

100vh 在 iPhone 14 横屏下只剩 390px，内容常被截；改用 100dvh（Safari 16.4+ / Chrome 105+ 支持），降级方案是 min-height: 100% + html, body { height: 100% }
flex-direction 不会自动翻转；竖屏用 column，横屏必须显式写 row，否则子项仍堆叠
font-size: 4vw 横屏暴增；改用 clamp(14px, 2.5vw, 16px) 锁死区间
100vw 在 iOS Safari 横屏时可能包含已隐藏地址栏高度，造成横向溢出；优先用 100% 或 100dvw

JavaScript 监听别用 `orientationchange`，改用 `matchMedia`

window.addEventListener('orientationchange', ...) 在 iOS 12+ 和所有现代安卓浏览器中已被废弃，且返回值不可靠（window.orientation 在很多设备上为 undefined）。

正确姿势是：

用 matchMedia("(orientation: landscape)") 监听，并调用 mql.addListener()（注意不是 addEventListener）
搭配 window.innerWidth / window.innerHeight 做 fallback 判断（if (window.innerWidth > window.innerHeight)）
避免在 resize 回调里反复调用 matchMedia，应复用已创建的 MediaQueryList 实例