当前位置：首页 > HTML

h5实现全屏

2026-03-06 13:11:16HTML

全屏 API 的基本使用

现代浏览器提供了 Fullscreen API，允许通过 JavaScript 将特定元素（如 <div> 或 <video>）全屏显示。以下是核心方法：

进入全屏：调用元素的 requestFullscreen() 方法。
退出全屏：调用 document.exitFullscreen()。
检测全屏状态：通过 document.fullscreenElement 判断当前是否有元素处于全屏。

// 进入全屏（以 div 元素为例）
const element = document.getElementById('fullscreen-target');
element.requestFullscreen().catch(err => {
  console.error('全屏失败:', err);
});

// 退出全屏
document.exitFullscreen();

// 监听全屏变化事件
document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('已进入全屏');
  } else {
    console.log('已退出全屏');
  }
});

兼容性处理

不同浏览器可能需要前缀，以下是兼容性写法：

function toggleFullscreen(element) {
  const requestMethod = 
    element.requestFullscreen || 
    element.webkitRequestFullscreen || 
    element.mozRequestFullScreen || 
    element.msRequestFullscreen;

  if (requestMethod) {
    requestMethod.call(element);
  } else if (typeof window.ActiveXObject !== 'undefined') {
    // 兼容旧版 IE
    const wscript = new ActiveXObject('WScript.Shell');
    if (wscript) wscript.SendKeys('{F11}');
  }
}

CSS 全屏样式优化

全屏元素可以通过 CSS 控制样式，确保内容适配全屏：

#fullscreen-target:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
}
#fullscreen-target:-moz-full-screen {
  /* Firefox 兼容 */
  width: 100vw;
  height: 100vh;
}

用户交互触发

通常通过按钮点击触发全屏，需注意浏览器安全策略要求全屏操作必须由用户手势（如 click）触发：

<button onclick="toggleFullscreen(document.getElementById('fullscreen-target'))">
  切换全屏
</button>
<div id="fullscreen-target">全屏内容区域</div>

移动端注意事项

移动设备可能限制全屏功能，建议结合 meta 标签优化视口：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

部分安卓设备需使用 webkitRequestFullscreen 并配合手势触发。

示例完整代码

以下是一个完整示例，包含进入/退出全屏和样式控制：

h5实现全屏

<!DOCTYPE html>
<html>
<head>
  <style>
    #fullscreen-target {
      width: 200px;
      height: 200px;
      background: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #fullscreen-target:-webkit-full-screen {
      background: #000;
      color: #fff;
    }
  </style>
</head>
<body>
  <button id="toggle-btn">切换全屏</button>
  <div id="fullscreen-target">全屏内容</div>

  <script>
    const btn = document.getElementById('toggle-btn');
    const target = document.getElementById('fullscreen-target');

    btn.addEventListener('click', () => {
      if (!document.fullscreenElement) {
        target.requestFullscreen().catch(console.error);
      } else {
        document.exitFullscreen();
      }
    });
  </script>
</body>
</html>

通过上述方法，可以实现在 H5 中灵活控制全屏显示，并覆盖主流浏览器的兼容性问题。

标签: 全屏