js 实现全屏

使用全屏 API 实现全屏

现代浏览器提供了 Fullscreen API，可以通过 JavaScript 控制元素进入或退出全屏模式。

// 进入全屏
function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { /* Safari */
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { /* IE11 */
    element.msRequestFullscreen();
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

// 检查全屏状态
function isFullscreen() {
  return !!(document.fullscreenElement || 
           document.webkitFullscreenElement || 
           document.msFullscreenElement);
}

监听全屏状态变化

可以添加事件监听器来响应全屏状态的变化。

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari
document.addEventListener('MSFullscreenChange', handleFullscreenChange); // IE

function handleFullscreenChange() {
  if (isFullscreen()) {
    console.log('进入全屏模式');
  } else {
    console.log('退出全屏模式');
  }
}

全屏样式调整

在全屏模式下，可以使用 CSS 伪类 :fullscreen 为全屏元素添加特殊样式。

:fullscreen, :-webkit-full-screen, :-ms-fullscreen {
  background-color: white;
  width: 100%;
  height: 100%;
}

兼容性注意事项

Fullscreen API 在不同浏览器中存在前缀差异：

• 标准：requestFullscreen、exitFullscreen、fullscreenElement
• WebKit (Safari/Chrome)：webkitRequestFullscreen、webkitExitFullscreen、webkitFullscreenElement
• Microsoft (IE/Edge)：msRequestFullscreen、msExitFullscreen、msFullscreenElement

实际应用示例

以下是一个完整的全屏切换按钮实现：

<button id="fullscreen-btn">切换全屏</button>
<div id="content">全屏内容区域</div>

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

  btn.addEventListener('click', () => {
    if (isFullscreen()) {
      exitFullscreen();
    } else {
      enterFullscreen(content);
    }
  });

  function enterFullscreen(element) {
    const requestMethod = element.requestFullscreen || 
                         element.webkitRequestFullscreen || 
                         element.msRequestFullscreen;
    requestMethod.call(element);
  }

  function exitFullscreen() {
    const exitMethod = document.exitFullscreen || 
                      document.webkitExitFullscreen || 
                      document.msExitFullscreen;
    exitMethod.call(document);
  }

  function isFullscreen() {
    return !!(document.fullscreenElement || 
             document.webkitFullscreenElement || 
             document.msFullscreenElement);
  }
</script>

移动端注意事项

在移动设备上，某些浏览器可能限制全屏功能，特别是 iOS Safari。某些情况下需要通过添加到主屏幕或使用特定 meta 标签来启用类似全屏的功能：

<meta name="apple-mobile-web-app-capable" content="yes">