应先在用户手势事件中调用screen.orientation.lock('portrait')，ios需pwa全屏模式且仅16.4+支持，安卓需chrome 87+并注意定制rom兼容性；失败时用@media(orientation:landscape)配合transform旋转兜底；android webview必须原生层配置android:screenorientation="portrait"；ios safari无法真正锁定，宜用横屏提示替代。
用 screen.orientation.lock 锁定竖屏，但得先处理权限和兼容性
现代浏览器（Chrome Android、Firefox Android、Safari iOS 16.4+）支持直接调用 screen.orientation.lock 锁定方向，但不是调了就生效：它需要用户手势触发（比如点击事件），且部分安卓 WebView 或旧版 Safari 会静默失败。
常见错误是页面加载完立刻执行：screen.orientation.lock('portrait')，结果控制台报错 DOMException: Permission denied 或直接无反应。
- 必须在用户交互回调中调用（如
button.addEventListener('click', ...)） - iOS Safari 要求页面已全屏（
<meta name="apple-mobile-web-app-capable" content="yes">）且启用 Web App 模式才可能成功 - 安卓 Chrome 87+ 支持，但某些定制 ROM（如华为 EMUI 内置浏览器）会忽略该 API
fallback 到 CSS @media (orientation: landscape) 强制重排版
当 JS 锁定失败或不支持时，靠 CSS 做视觉兜底最实际：检测横屏状态，把整个页面压成竖向布局，避免内容被拉伸或错位。
这不是真“禁止”横屏，而是让横屏看起来像竖屏——对多数表单、阅读类页面足够有效。
立即学习“前端免费学习笔记（深入）”；
- 用
@media (orientation: landscape)包裹重置样式，比如body { transform: rotate(-90deg) translateX(-100vh); width: 100vh; height: 100vw; } - 务必加
transform-origin: top left防止旋转后定位偏移 - 注意输入框、
textarea在旋转后可能无法聚焦，需额外监听focus并临时还原
Android WebView 中禁用横屏需配合原生层配置
如果你的 HTML 是嵌在 Android App 的 WebView 里，光靠前端代码基本无效——系统级横屏由 Activity 控制，WebView 自身没有权限干预。
前端再怎么调 screen.orientation.lock 或写 CSS，只要 Activity 允许横屏，用户一转手机，WebView 就跟着缩放或重绘，甚至白屏。
- 必须让原生开发同事在
AndroidManifest.xml中设置对应 Activity 的android:screenOrientation="portrait" - 若用
WebViewClient加载网页，还需确认没调用setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED) - 纯 H5 页面（非嵌入 App）则不用管这一条
iOS Safari 的硬限制：无法真正阻止横屏，只能引导用户
iOS 上没有任何可靠方式阻止横屏旋转。Safari 不支持 screen.orientation.lock（直到 iOS 16.4 才实验性开放，且仅限 PWA 全屏模式），@media 旋转方案也会因地址栏/工具栏高度变化导致布局抖动。
这时候最务实的做法是：不硬抗，改提示。
- 监听
window.matchMedia('(orientation: landscape)')，横屏时显示半透明浮层，文字写清楚“请将手机竖过来使用” - 浮层按钮可绑定
screen.orientation.unlock()+ 提示“已退出锁定”，避免用户误以为页面卡死 - 别用
rotate(90deg)强转，iOS Safari 对 transform 渲染不稳定，尤其带 input 的页面容易失焦或键盘弹不出
真正难的不是写几行代码，而是分清场景：是独立 H5？还是嵌在 App 里？目标用户主要用什么机型？不同路径下失效原因完全不同。拿不准时，先用 console.log(screen.orientation) 看值，比查文档快得多。
