本文介绍两种在 webflow 构建的网站中强制保持竖屏（portrait）显示的方法：一是通过 screen orientation api 直接锁定方向（需兼容性处理），二是优雅降级——在横屏时显示友好提示，提升移动端用户体验。
在 Webflow 中，由于其可视化编辑器不原生支持屏幕方向控制，实现竖屏锁定需借助自定义代码（Custom Code）。以下是两种实用、可落地的方案，兼顾技术可行性与用户体验。
✅ 方案一：使用 Screen Orientation API 强制锁定竖屏（推荐用于 PWA 或全屏场景）
现代浏览器提供了 screen.orientation.lock() 方法，可主动锁定设备方向：
// 在页面加载完成后尝试锁定为 portrait
if (screen.orientation && screen.orientation.lock) {
screen.orientation.lock('portrait')
.then(() => console.log('Orientation locked to portrait'))
.catch(err => console.warn('Lock failed:', err));
} else {
console.log('Screen Orientation API not supported');
}⚠️ 重要限制与注意事项：
- 浏览器兼容性有限：仅 Chrome（Android）、Edge（Android）、Samsung Internet 等部分移动浏览器支持；iOS Safari 完全不支持 lock() 方法（MDN 兼容性表）。
- 需用户手势触发：多数浏览器要求该操作必须由用户交互（如点击）发起，不能在页面加载时自动执行。
- 常需配合全屏模式：如 Stack Overflow 所述，在 Chrome 和 Samsung Internet 中，lock() 通常需先调用 document.body.requestFullscreen()（返回 Promise），再在其 then 中执行锁定：
document.addEventListener('click', async () => {
try {
await document.body.requestFullscreen();
await screen.orientation.lock('portrait');
} catch (err) {
console.warn('Fullscreen or orientation lock failed:', err);
}
});? 在 Webflow 中：将上述代码添加至 Project Settings → Custom Code → Before ，并建议绑定到一个显眼的“开始体验”按钮上，以满足用户手势要求。
✅ 方案二：优雅提示横屏用户（100% 兼容，强烈推荐）
当无法可靠锁定方向时，更稳健的做法是监听 resize 或 orientationchange 事件，动态检测横屏状态，并展示轻量级提示层：
<!-- 添加到 Webflow 的 Before </body> -->
<div id="landscape-warning" style="
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.9);
z-index: 9999;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
">
<h2 style="margin: 0 0 16px 0; font-weight: 600;">请将设备转为竖屏</h2>
<p style="max-width: 80%; line-height: 1.5;">
本页面专为竖屏设计，旋转设备即可获得最佳体验。
</p>
<div style="margin-top: 24px; width: 60px; height: 60px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 6L13.41 7.41L9.83 11H19V13H9.83L13.41 16.59L12 18L18 12L12 6Z" fill="#000"/>
</svg>
</div>
</div>// 检测横屏并显示提示
function handleOrientation() {
const isLandscape = window.innerWidth > window.innerHeight;
const warning = document.getElementById('landscape-warning');
if (isLandscape) {
warning.style.display = 'flex';
} else {
warning.style.display = 'none';
}
}
// 初始检查 + 监听变化
handleOrientation();
window.addEventListener('resize', handleOrientation);
// 可选：补充 orientationchange 事件（iOS Safari 支持）
window.addEventListener('orientationchange', handleOrientation);✅ 此方案无兼容性风险，适用于所有浏览器（包括 iOS Safari），且视觉简洁、引导明确，符合 Webflow 项目快速上线的需求。
? 总结建议
| 场景 | 推荐方案 | 原因 |
|---|---|---|
| 构建 PWA 或需强控制的沉浸式应用 | 方案一（结合全屏+锁向） | 体验最彻底，但需用户授权且兼容性受限 |
| 面向大众用户的响应式网站（含 iOS 用户） | 方案二（横屏提示） | 100% 兼容、零权限要求、开发维护成本低、符合 WCAG 可访问性原则 |
最后提醒：Webflow 导出的静态站点不支持服务端逻辑，所有方向控制均依赖客户端 JavaScript。务必在真实设备（尤其是 iPhone）上充分测试，避免因 orientationchange 事件不可靠而漏判——此时 window.innerWidth > window.innerHeight 是最可靠的横竖屏判断依据。
