Webflow网站竖屏方向锁定咨询：两种实现方案需求

方案一：视觉锁定竖屏（旋转屏幕时内容保持竖屏） #

浏览器无法强制系统级的屏幕方向锁定，但可以通过CSS和JavaScript实现视觉上始终保持竖屏显示，用户旋转设备时，页面内容不会跟随横屏，而是维持竖屏布局。

实现步骤： #

1. 在Webflow项目设置的「自定义代码」→「页脚代码」中添加以下代码：

/* 强制页面容器适配竖屏比例 */
body {
  min-width: 100vh;
  min-height: 100vw;
  transform-origin: top left;
}

/* 横屏时旋转页面回到竖屏视角 */
@media screen and (orientation: landscape) {
  body {
    transform: rotate(-90deg) translateX(-100%);
  }
}

// 监听屏幕旋转事件，确保样式实时生效
window.addEventListener('orientationchange', function() {
  document.body.style.transform = (window.orientation === 90 || window.orientation === -90) 
    ? 'rotate(-90deg) translateX(-100%)' 
    : '';
});

2. 发布网站后测试：旋转设备时，页面会自动调整视觉角度，始终保持竖屏展示效果。

方案二：横屏时显示美观提示 #

如果不需要强制视觉竖屏，可在用户切换到横屏时，显示自定义提示层，引导用户转回竖屏浏览。

实现步骤： #

1. 在Webflow编辑器中添加一个新的div元素（命名为landscape-warning），设计提示样式（比如居中的提示文字、全屏遮罩背景），默认设置为display: none。
2. 在项目设置的「自定义代码」→「页脚代码」中添加以下CSS：

/* 横屏时显示提示层，隐藏主内容 */
@media screen and (orientation: landscape) {
  .landscape-warning {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-size: 1.5rem;
    color: #333;
  }
  /* 隐藏主内容区域，请替换为你网站实际的主容器类名 */
  .your-main-content-class {
    display: none !important;
  }
}

3. 将.your-main-content-class替换为你网站主内容容器的实际类名，发布后测试：横屏时自动显示提示层，竖屏时恢复正常浏览。

内容的提问来源于stack exchange，提问作者Webflow Magician