可通过CSS媒体查询orientation特性检测横竖屏：orientation: landscape匹配横屏（宽≥高），portrait匹配竖屏（高＞宽），判断基于视口尺寸而非物理传感器；可叠加min-width等条件提升精度；JavaScript可用matchMedia或resize事件动态监听，需配合viewport meta标签确保生效。
可以通过 CSS 媒体查询中的 orientation 特性来检测设备是否处于横屏状态，并针对性地应用样式。
使用 orientation: landscape 媒体查询
这是最直接的方式，浏览器会根据视口宽高比自动判断方向：
- 当视口宽度 ≥ 高度时，视为横屏（
landscape） - 当视口高度 > 宽度时，视为竖屏（
portrait） - 注意：该判断基于 当前视口尺寸，不依赖设备物理朝向传感器
示例：
@media (orientation: landscape) {
.header { font-size: 1.5rem; }
.sidebar { display: block; }
}
@media (orientation: portrait) {
.header { font-size: 1.2rem; }
.sidebar { display: none; }
}
结合 max-width 或 min-height 提升准确性
单纯用 orientation 在某些平板或折叠屏上可能不够精准（比如 1200×800 视口在横屏下也可能是“竖屏”比例）。可叠加断点增强控制：
- 对大屏设备优先按宽度判断，小屏再看方向
- 例如：仅在屏幕宽度 ≥ 768px 且为横屏时启用双栏布局
示例：
@media screen and (min-width: 768px) and (orientation: landscape) {
.container { display: grid; grid-template-columns: 2fr 1fr; }
}
JavaScript 动态监听方向变化
若需在运行时响应方向切换（如触发动画、重载数据），可用 JS 监听 resize 或 orientationchange 事件：
-
window.matchMedia("(orientation: landscape)")可主动查询当前状态 -
orientationchange事件在 iOS Safari 中支持较好，但 Android 浏览器兼容性不一，resize更通用 - 建议节流处理，避免频繁触发
简易监听示例：
function handleOrientation() {
const isLandscape = window.matchMedia("(orientation: landscape)").matches;
document.body.classList.toggle("is-landscape", isLandscape);
}
window.addEventListener("resize", handleOrientation);
handleOrientation(); // 初始化
注意 viewport 设置和移动端适配
确保 HTML 中有正确的 viewport meta 标签，否则媒体查询可能失效：
- 缺少该标签时，移动端可能以桌面宽度渲染，导致
orientation判断失准 - 避免设置
user-scalable=no或固定width，以免干扰方向检测
