用@media判断横竖屏应使用orientation媒体特性：width≤height为portrait（竖屏），否则为landscape（横屏）；需注意其仅依据视口宽高比，不反映物理朝向，且易受软键盘、webview兼容性等干扰，推荐辅以min-width/max-height断点或matchmedia动态监听提升可靠性。
如何用@media判断设备是竖屏还是横屏
直接用 orientation 媒体特性就能区分，但要注意它只看视口宽高比，不看设备物理朝向或系统设置。很多开发者误以为它能精准响应旋转事件，其实不是。
浏览器根据当前 viewport 的 width 和 height 自动计算：当 width ≤ height 时为 portrait，否则为 landscape。这意味着在桌面浏览器缩放窗口也能触发切换——这既是便利，也是陷阱。
portrait和landscape的写法与常见错误
语法很简单，但容易写错大小写或漏掉括号：
-
@media (orientation: portrait)✅ 正确（注意冒号后有空格，值小写） -
@media (orientation: Portrait)❌ 大写会失效 -
@media orientation = landscape❌ 缺少括号，完全无效 -
@media screen and (orientation: portrait)✅ 可加screen，但非必须
实际项目中建议加上 screen 前缀，避免意外匹配到打印样式表等其他媒体类型。
为什么有时旋转设备却不触发@media重算
关键原因有三个：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 某些安卓 WebView 或旧版 Safari 在地址栏/状态栏显示/隐藏时会临时改变
height，导致orientation值来回跳变，甚至卡在错误状态 - 使用了
viewport的user-scalable=no或强制缩放，可能干扰浏览器对视口尺寸的判定 - 页面存在固定高度容器（如
html { height: 100vh; }），在软键盘弹出时vh值突变，间接影响 orientation 判定逻辑
验证方法：在 DevTools 里手动拖拽模拟器尺寸，观察是否实时响应；如果手动调尺寸能触发，但真机旋转不能，大概率是 WebView 或 viewport 配置问题。
更可靠的替代方案：用宽高具体数值代替orientation
当需要稳定控制布局（比如横屏时显示侧边栏、竖屏时隐藏），推荐用 min-width/max-height 组合代替纯 orientation：
@media (min-width: 768px) and (max-height: 500px) {
.sidebar { display: block; }
}
@media (max-width: 480px) and (min-height: 700px) {
.sidebar { display: none; }
}
这样绕开了 orientation 的模糊性，也更容易测试和调试。尤其在 iPad 或折叠屏设备上，orientation 可能长期保持 landscape（即使盖上键盘），而具体断点值不会撒谎。
真正麻烦的是那些既要响应旋转、又要兼容软键盘、还要适配折叠屏的场景——这时候 orientation 就不该是唯一依据，得结合 resize 事件和 window.matchMedia 动态监听才稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
