HTML横屏提示与竖屏检测方法分享

横屏竖屏检测，看起来是个小需求，实际踩过的坑却不少。很多人一上手就奔着 window.orientation 去了，结果发现它在 iOS 上早就不管用了；或者干脆想用 screen.orientation，兼容性却让你头疼。先说几个核心判断：最靠谱的方式是 matchMedia 搭配 resize 事件；提示层最好用 fixed 定位加 display: none，别妄想用 transform 旋转页面来解决问题。

怎么用 Ja vaScript 检测横屏竖屏

浏览器本身并没有提供现成的 API，直接返回类似“横屏”或“竖屏”这样的字符串。过去大家常用 window.orientation，但它已明确被废弃。现在判断的核心不再是“设备当前转了多少度”，而是“viewport 的宽高关系是否满足横屏逻辑”——特别像折叠屏、桌面浏览器缩放这些场景，orientation 根本不会变，但布局已经变了。

推荐路子是用媒体查询：matchMedia("(orientation: landscape)")。它监听的是 viewport 宽高比变化，兼容性做得不错（Chrome 38+、Firefox 32+、Safari 9+、Edge 12+），而且不依赖硬件陀螺仪。

• matchMedia("(orientation: landscape)").matches 返回 true 时，表示当前符合横屏条件，也就是 viewport 的宽度 ≥ 高度。
• 不要只依赖 orientationchange 事件——iOS Safari 在某些版本下根本不会触发它，安卓 WebView 的表现也不统一。
• 必须额外监听 resize 事件，因为用户拖拽浏览器窗口、启用分屏、或者在 PWA 下切换全屏时，orientation 可能没变化，但布局早已不同。

横屏提示 DOM 怎么加才不卡顿不闪屏

提示层千万别想着用 CSS transform: rotate(90deg) 来强行转页面。这种操作会强制重绘，触发 layout thrashing，特别是在低端安卓机上，很容易就卡死了。正确的做法是：用一个固定定位的浮层，配合独立的样式控制，只在需要的时候显示，并且不干扰主内容流。

现摘一段核心示例结构：

  
请将设备旋转为竖屏使用
  我知道了

• 显隐控制用 display: none，别试 opacity: 0 加 visibility: hidden 的组合，那样 DOM 其实还在参与渲染流程。
• 浮层内部的文字排版，尽量别用百分比字体或 rem 做动态计算，统一用 px 或 em，这样在 resize 过程中文字不会跳来跳去。
• 项目用了 Vue 或 React 的话，不要把提示逻辑直接写在组件的 mounted 或 useEffect 里监听 resize——需要手动 removeEventListener，否则很容易内存泄漏。

为什么 iOS Safari 横屏检测经常失效

iOS Safari 对 screen.orientation 的支持极其有限（Safari 16.4 才开始部分支持，且仅限于 PWA 全屏模式），window.orientation 在 iOS 13+ 以后已经彻底废了。所以别碰这两个 API，纯靠 matchMedia 加 resize 才是唯一稳定的路径。

• 真机测试时，得确认一下 Safari 的设置里没有开启“请求桌面站点”——开启后 viewport 行为会异常，matchMedia 可能做出错误判断。
• iPadOS 分屏模式下，viewport 宽高比变化非常频繁，最好加个防抖：用 setTimeout 延迟 150ms 再执行提示逻辑，避免 resize 连续触发多次。
• 微信内置浏览器（iOS 上）会劫持 resize，有时候延迟高达 500ms，可以额外加一次 setTimeout(() => checkOrientation(), 0) 做兜底。

要不要自动旋转页面内容

不要。自动调用 screen.orientation.lock("portrait") 在大多数浏览器里都会被拒绝（需要用户手势触发、HTTPS、还有全屏权限），而且强行锁屏会破坏用户的操作习惯，特别对辅助功能使用者很不友好。

• Android Chrome 支持 screen.orientation.lock，但只限于用户点击后的 5 秒内，超时就会失败。
• iOS 完全不支持这个 API，直接调用会报错：TypeError: screen.orientation.lock is not a function。
• 真正该做的是提示和引导，而不是控制。比如在提示层里加一句“旋转后双击屏幕可放大”，比强行锁屏自然得多。

需要警惕的是，横屏检测真正的难点不在代码本身，而在各种 WebView 容器的行为差异和用户真实操作路径的覆盖。像分屏、画中画、PWA 安装后首次启动这些场景下，media query 的触发时机都可能不同，建议还是在实机上多测一测。