不能只用max-width判断横屏，因为宽度断点无法反映实际宽高比关系：iPad竖放时min-width:768px会误触发，而小屏手机横置时width可能仍小于断点值，导致漏判；必须结合orientation:landscape媒体特性，依据window.innerWidth与window.innerHeight的实时比较来准确判定横屏状态。
横屏模式不是靠猜的，必须用 orientation: landscape 明确检测，而不是只依赖宽度断点。
为什么不能只用 max-width 判断横屏
很多开发者误以为“屏幕宽 > 高”就等于横屏，于是写 @media (min-width: 768px) 来覆盖——这在 iPad 竖着放时也会触发，实际仍是竖屏；反之，小屏手机横过来时宽度可能仍 min-width 根本不生效。结果就是布局错乱、导航栏被切掉、按钮点不到。
-
orientation是唯一能真实反映设备物理朝向的媒体特性，值为landscape或portrait - 它和
width/height独立计算，不受缩放、iframe 嵌套或 CSS transform 干扰 - 必须和
screen类型一起用：@media screen and (orientation: landscape)，否则在打印预览等场景会意外触发
@media (orientation: landscape) 的典型用法
横屏优化不是简单“把东西铺开”，而是重新组织信息密度和交互路径。常见场景包括：
- 侧边栏从隐藏状态（
display: none）变为可见（display: block），配合flex-direction: row拉平主内容区 - 表格从“堆叠式卡片”切换回原生
<table> 布局，避免横向滚动条 <li>视频播放器取消全屏按钮，直接撑满容器宽度，同时提升 <code>font-size便于远距离观看 - 触控区域扩大：横屏时手指更易横向滑动，可将
padding从12px提到20px，防止误触
示例：
立即学习“前端免费学习笔记（深入）”；
.sidebar {
display: none;
}
@media screen and (orientation: landscape) {
.sidebar {
display: block;
flex-basis: 280px;
}
.main-content {
flex-grow: 1;
}
}
横屏 + 宽度断点的组合写法
单靠 orientation 不够——比如大屏笔记本横着放，但用户其实需要桌面级布局，而非平板横屏逻辑。这时要叠加宽度条件：
- 仅对中等尺寸设备启用横屏适配：
@media screen and (orientation: landscape) and (max-width: 1024px) - 排除桌面大屏干扰：
@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) - 注意顺序：先写
screen，再写orientation，最后是尺寸条件，避免语法错误
别写成 @media (orientation: landscape) and (min-width: 768px) ——漏掉 screen 类型会导致部分旧 Android 浏览器忽略整个规则。
真机测试时容易忽略的细节
Chrome DevTools 的“旋转”按钮只改 deviceOrientation，不触发 orientation 媒体查询；Firefox 的响应式设计模式默认禁用该特性。真正验证必须上真机：
- iOS Safari 和 Android Chrome 都支持
orientation，但部分 WebView（如微信内置浏览器）会锁定为portrait，永远不触发横屏样式 - 横屏时 viewport 缩放可能变化，务必确认
<meta name="viewport" content="width=device-width, initial-scale=1">已设置，否则orientation计算基准错乱 - 横屏切换瞬间会触发两次重排：一次是旋转事件，一次是媒体查询匹配。避免在横屏样式里写
transition: all，否则动画卡顿明显
最稳妥的做法：横屏逻辑只改布局结构和显隐控制，字体、颜色、间距等视觉变量仍由宽度断点统一管理。
