本文详解如何通过原生 javascript（screen orientation api）在 webflow 构建的网站中实现竖屏锁定或优雅提示横屏用户，涵盖兼容性处理、全屏前置条件及实用代码示例。
本文详解如何通过原生 javascript（screen orientation api）在 webflow 构建的网站中实现竖屏锁定或优雅提示横屏用户，涵盖兼容性处理、全屏前置条件及实用代码示例。
在 Webflow 中构建响应式网站时，部分项目（如问卷页、引导流程、AR 预览页或单列信息流）在横屏下体验极差，甚至完全失去可用性。此时，主动干预设备方向比被动适配更合理。虽然 Webflow 本身不提供“锁定屏幕方向”的可视化设置，但可通过嵌入自定义 JavaScript 实现两种专业级方案：强制竖屏锁定（适用于支持 API 的现代浏览器），或检测横屏并展示友好提示层（降级兜底，100% 兼容）。
✅ 方案一：使用 Screen Orientation API 强制锁定竖屏
核心方法是调用 screen.orientation.lock('portrait')，但需注意其严格的安全与上下文限制：
- 仅在用户手势触发（如点击、触摸）后可调用；
- 多数浏览器（Chrome、Edge、Samsung Internet）要求先请求全屏模式；
- Safari（iOS/macOS）完全不支持该 API；
- 部分 Android WebView 亦受限。
以下是一段生产就绪的封装代码，已集成错误处理与降级逻辑，建议通过 Webflow 的「Settings → Custom Code → Before
