本文介绍两种在 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 事件，动态检测横屏状态，并展示轻量级提示层：

  
请将设备转为竖屏
  

    本页面专为竖屏设计，旋转设备即可获得最佳体验。
  
  
    
  

// 检测横屏并显示提示
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 项目快速上线的需求。

? 总结建议

最后提醒：Webflow 导出的静态站点不支持服务端逻辑，所有方向控制均依赖客户端 JavaScript。务必在真实设备（尤其是 iPhone）上充分测试，避免因 orientationchange 事件不可靠而漏判——此时 window.innerWidth > window.innerHeight 是最可靠的横竖屏判断依据。