CSS如何判断设备横竖屏状态

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《CSS如何判断设备横竖屏状态》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

应使用 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 设置不当。比如 缺失，或写了 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 做更新，其他都算补充。

今天关于《CSS如何判断设备横竖屏状态》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！