移动端浏览器：HTML元素全屏并自动转横屏方案（含video与div差异）

我之前也碰到过这个棘手的问题——浏览器对原生video元素的全屏有内置的横屏适配逻辑，但普通div确实没这个“特殊待遇”。下面分享几个经过实践验证的可行方案，帮你实现包含video的div全屏时自动横屏：

方案一：全屏API + CSS旋转 + 屏幕方向锁定 #

这个方案的核心是手动让全屏后的div旋转适配横屏，同时尝试锁定屏幕方向，模拟video的原生行为。

实现步骤： #

1. 通过requestFullscreen()让div进入全屏模式
2. 全屏后给div添加CSS旋转样式，让内容适配横屏显示
3. 利用屏幕方向API锁定横屏（需要用户交互触发）
4. 退出全屏时恢复样式并解锁方向

代码示例： #

const container = document.getElementById('video-container');

// 触发全屏并切换横屏的函数
async function enterFullscreenLandscape() {
  try {
    // 先进入全屏（必须由用户交互触发，比如点击按钮）
    await container.requestFullscreen();
    
    // 添加旋转样式，让容器内容横屏展示
    container.style.transform = 'rotate(90deg)';
    container.style.transformOrigin = 'center center';
    container.style.width = '100vh';
    container.style.height = '100vw';
    container.style.marginLeft = '-50vh';
    container.style.marginTop = '50vw';
    
    // 尝试锁定屏幕方向为横屏（部分浏览器支持）
    if (screen.orientation?.lock) {
      await screen.orientation.lock('landscape');
    }
  } catch (err) {
    console.error('全屏或横屏操作失败:', err);
  }
}

// 监听全屏状态变化，退出时恢复样式
document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    // 重置容器样式
    container.style.transform = '';
    container.style.width = '';
    container.style.height = '';
    container.style.marginLeft = '';
    container.style.marginTop = '';
    
    // 解锁屏幕方向
    if (screen.orientation?.unlock) {
      screen.orientation.unlock();
    }
  }
});

// 绑定用户点击事件触发（必须由用户交互触发）
document.getElementById('fullscreen-trigger').addEventListener('click', enterFullscreenLandscape);

注意事项： #

• 屏幕方向锁定API（screen.orientation.lock）受浏览器安全策略限制，必须由用户主动交互（比如点击、触摸）触发，无法自动执行
• iOS Safari对screen.orientation的支持有限，需要额外做兼容性处理

方案二：借势Video的原生横屏逻辑 #

既然浏览器对video有自动横屏的特殊处理，我们可以让div作为video的容器，把video隐藏起来，通过触发video的全屏来间接让div内容横屏。

实现步骤： #

1. 让video元素占满整个div，设置opacity: 0隐藏（不要用display: none，否则浏览器不会触发横屏）
2. 当需要全屏时，调用video的requestFullscreen()，触发浏览器自动横屏
3. 把div的自定义内容（比如控制栏、文字）设置为绝对定位，覆盖在video上方

代码示例： #

<div id="video-container" style="position: relative; width: 100%; height: 100vh;">
  <!-- 隐藏的video，用于触发横屏 -->
  <video id="placeholder-video" style="width: 100%; height: 100%; opacity: 0;" playsinline src="empty-video.mp4"></video>
  <!-- 你的自定义内容，比如视频控制栏、标题等 -->
  <div class="custom-content" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: white;">
    <!-- 这里放你的内容 -->
  </div>
</div>
<button id="fullscreen-btn">开启全屏横屏</button>

const video = document.getElementById('placeholder-video');
const container = document.getElementById('video-container');
const fullscreenBtn = document.getElementById('fullscreen-btn');

fullscreenBtn.addEventListener('click', async () => {
  try {
    // 触发video全屏，浏览器会自动切换横屏
    await video.requestFullscreen();
    // 给容器添加全屏样式，适配横屏布局
    container.classList.add('fullscreen-active');
  } catch (err) {
    console.error('全屏操作失败:', err);
  }
});

// 退出全屏时恢复样式
document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    container.classList.remove('fullscreen-active');
  }
});

注意事项： #

• video需要有有效的视频源（哪怕是一个几秒钟的空视频），否则部分浏览器不会触发横屏逻辑
• 添加playsinline属性可以避免iOS上视频自动全屏的默认行为，让我们能手动控制

方案三：PWA专属——Web App Manifest设置 #

如果你的应用是PWA（渐进式Web应用），可以在manifest.json中配置默认的屏幕方向，用户添加到主屏幕后打开会自动以横屏全屏显示：

{
  "name": "你的应用名称",
  "short_name": "应用简称",
  "display": "fullscreen",
  "orientation": "landscape",
  "start_url": "/"
}

这个方案只适用于PWA场景，无法实现普通网页的实时横屏切换。

核心提醒 #

• 所有全屏和屏幕方向的操作都必须由用户主动交互触发，这是浏览器的安全限制，无法通过脚本自动执行
• 不同移动端浏览器的兼容性差异较大，建议在目标机型上做充分测试
• 如果是视频相关场景，优先考虑方案二，它利用了浏览器原生的video横屏逻辑，兼容性和稳定性更好

内容的提问来源于stack exchange，提问作者isharth rastogi