应使用 matchmedia 而非 window.orientation：前者实时响应横竖屏变化且全平台兼容，后者已废弃；监听 change 事件而非 resize；css orientation 基于视口宽高比，非设备物理方向。
用 window.orientation 判断横竖屏？别用了，已废弃
这个 API 在现代浏览器里基本不可靠：Chrome 从 99 版起彻底移除，Safari 早就不响应变化，Firefox 也标记为 deprecated。哪怕你看到它返回 0 或 90，也不能代表真实屏幕方向——它只反映页面加载时的初始值，或某些旧安卓 WebView 的残余行为。
真正能用的只有媒体查询 + matchMedia：
-
window.matchMedia("(orientation: portrait)").matches返回true表示当前是竖屏 -
window.matchMedia("(orientation: landscape)").matches返回true表示当前是横屏 - 它实时响应旋转事件，且兼容所有主流桌面/移动浏览器（包括 iOS Safari）
监听屏幕旋转变化必须用 addEventListener("resize")？不准确
resize 事件在桌面端会频繁触发（比如拖拽窗口），在移动端却不一定随旋转触发——尤其 iOS Safari 中，旋转时可能不发 resize，或者延迟数秒才发。真正该监听的是 matchMedia 的 change 回调：
const mql = window.matchMedia("(orientation: portrait)");
mql.addEventListener("change", (e) => {
if (e.matches) {
console.log("现在是竖屏");
} else {
console.log("现在是横屏");
}
});
注意两点：
- 不要只靠首次
mql.matches判断初始状态，change回调才是唯一可靠的响应机制 - IE11 不支持
addEventListener写法，得用mql.addListener()兜底（但 IE11 已无横竖屏自动旋转逻辑，实际影响极小）
CSS 媒体查询写 @media (orientation: landscape) 为什么有时不生效？
常见原因是 viewport 设置不当。比如 <meta name="viewport" content="width=device-width, initial-scale=1"> 缺失，或写了 user-scalable=no 导致 iOS 强制锁定缩放，进而干扰 orientation 判定。
更隐蔽的问题是「窄屏横置」场景：当设备物理宽度小于高度（如手机竖着拿），但用户把网页 zoom 到很大，导致视口宽度 > 高度，此时 (orientation: landscape) 仍会匹配——因为 orientation 是按视口宽高比算的，不是设备传感器数据。
- 判定逻辑是：
if (viewportWidth > viewportHeight) → landscape，否则portrait - 这意味着：纯 CSS 无法区分“手机横着拿”和“手机竖着拿但放大了页面”
- 如果业务强依赖物理方向（比如视频全屏），必须结合
screen.orientation（需 HTTPS + 用户手势触发）
需要精确知道设备物理朝向？screen.orientation 有硬限制
这个 API 能拿到 screen.orientation.type（如 "portrait-primary"），但它不是随时可读：
- 必须在安全上下文（HTTPS 或 localhost）中运行
- 首次访问需由用户手势（如 click/tap）触发，否则会报
SecurityError - iOS Safari 完全不支持，Android Chrome 仅在部分版本中允许读取，且不响应动态变化
- 即便能读，
type字符串含义依赖设备出厂设定（有些平板 primary 是横屏），不能直接映射 UI 布局
所以，绝大多数响应式布局场景，老老实实用 matchMedia + 视口宽高比就够了；真要对齐物理传感器，得接受平台差异和权限门槛。
orientation 判断从来不是个“开关式”问题——它本质是视口、设备、用户操作三者博弈的结果，最稳的解法永远是：用媒体查询做基础响应，用 resize/matchMedia change 做更新，其他都算补充。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
