index.html中的横屏显示提示功能：HTML移动端开发技巧-html教程-PHP中文网

Screen Orientation API无法真正强制横屏，仅能发起请求；iOS Safari完全不支持，Android需HTTPS、用户手势触发且常需先全屏，失败时静默或抛错；可靠方案是CSS媒体查询+旋转提示+视觉模拟。

index.html中的横屏显示提示功能：html移动端开发技巧

为什么 window.orientation 已经不能用了

很多老项目还在用 window.orientation 判断横竖屏，但它早在 Chrome 38、Firefox 32 就被标记为废弃，Safari 15.4 后彻底不触发。现在调用它大概率返回 0 或 undefined，尤其在 iOS Safari 和安卓 WebView 中完全不可靠。

真正该依赖的是媒体查询： matchMedia("(orientation: landscape)")。它不看陀螺仪，只比对 innerWidth 和 innerHeight，兼容性覆盖所有现代移动端浏览器（包括微信内置浏览器），且能响应分屏、PWA 全屏切换、窗口缩放等场景。

不要只监听 orientationchange 事件——iOS Safari 很多版本压根不发这个事件
必须同时监听 resize，否则用户拖拽浏览器窗口或从全屏退出时，提示层会卡在错误状态
matchMedia 返回的 matches 是布尔值，直接用于条件判断，不用再做 === 90 这类魔数比较

怎么写一个不闪屏、不卡顿的横屏提示层

用 transform: rotate(90deg) 强转整个页面是典型反模式：低端安卓机上会触发 layout thrashing，文字跳动、滚动卡顿、甚至白屏。正确做法是独立浮层 + display: none 控制显隐。

示例结构（精简可直接用）：

<div id="landscape-tip" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; display: flex; justify-content: center; align-items: center; flex-direction: column; color: white; font-size: 16px; text-align: center;">
  <div>请将手机横过来使用</div>
  <button onclick="this.parentElement.style.display='none'" style="margin-top: 16px; padding: 8px 20px; background: #007aff; border: none; color: white; border-radius: 4px;">我知道了</button>
</div>

浮层内字体统一用 px 或 em，禁用 rem 或百分比字号，防止 resize 过程中重排导致文字抖动
不要用 opacity: 0 + visibility: hidden 组合隐藏——DOM 仍参与渲染流程，影响性能
如果用 React/Vue，务必在组件卸载时手动 removeEventListener，否则 resize 监听器持续累积引发内存泄漏

screen.orientation.lock() 调用失败的三个高频原因

screen.orientation.lock('landscape') 看似是“强制横屏”的银弹，但实际成功率极低。失败时控制台常报 NotAllowedError、NotSupportedError 或静默无反应，根源往往不是代码写错，而是环境不满足。

Unreal Images

Unreal Images是一款提供免费 AI 生成图片、照片、艺术图和插画的图库网站。

下载

screen.orientation 在 iOS Safari 中始终为 undefined（截至 Safari 16.4，仅 PWA 全屏模式下部分支持）
调用必须发生在用户手势回调内（click、touchend），放在 DOMContentLoaded 或定时器里必抛 NotAllowedError
部分安卓 WebView（如旧版微信、QQ 浏览器）会忽略锁屏请求，且不抛错，导致逻辑“假成功”

建议每次调用前先检查支持性：if ('orientation' in screen && typeof screen.orientation.lock === 'function')，再执行。

CSS 视觉模拟横屏时最易忽略的尺寸交换

当 screen.orientation.lock() 不可用时，主流降级方案是 CSS 旋转 + 尺寸交换。但很多人只加了 transform: rotate(90deg)，忘了关键一步：body 的宽高必须互换，否则内容被裁切或留大片空白。

正确写法（仅在竖屏时生效）：

@media (orientation: portrait) {
  body {
    transform: rotate(90deg);
    transform-origin: top left;
    width: 100vh;
    height: 100vw;
    margin: 0;
    overflow: hidden;
  }
}

transform-origin: top left 是必须项，否则旋转后元素定位偏移，按钮点不到
overflow: hidden 防止旋转后出现横向滚动条
所有 position: absolute 元素需手动重算坐标（比如原 top: 20px; left: 30px 要改为 top: 30px; left: calc(100vw - 20px)），否则位置全乱

真正的横屏适配不是追求“锁住”，而是分层兜底：先试 API，失败则视觉模拟，再叠加清晰提示。最常被跳过的其实是 resize 节流——没用 requestAnimationFrame 包裹方向检测逻辑的话，快速旋转设备时 UI 会疯狂闪烁。