h5 实现全屏

全屏 API 的基本使用

HTML5 提供了全屏 API，允许网页元素或整个页面进入全屏模式。现代浏览器均支持该功能，但需要处理不同浏览器的前缀差异。

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

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

监听全屏状态变化

通过 fullscreenchange 事件可以检测全屏状态的切换。需注意不同浏览器的事件名称差异。

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);

function handleFullscreenChange() {
  const isFullscreen = document.fullscreenElement || 
                      document.webkitFullscreenElement || 
                      document.msFullscreenElement;
  console.log(isFullscreen ? '进入全屏' : '退出全屏');
}

全屏样式调整

在全屏模式下，CSS 伪类 :fullscreen 可以针对全屏元素应用特殊样式。需添加浏览器前缀兼容。

:-webkit-full-screen {
  background-color: white;
}

:-ms-fullscreen {
  background-color: white;
}

:fullscreen {
  background-color: white;
}

按钮触发示例

通过按钮控制全屏状态的典型实现方式。建议对不支持全屏的浏览器提供回退提示。

<button id="fullscreen-btn">切换全屏</button>
<script>
  const btn = document.getElementById('fullscreen-btn');
  btn.addEventListener('click', () => {
    if (!document.fullscreenElement) {
      requestFullscreen(document.documentElement);
    } else {
      exitFullscreen();
    }
  });
</script>

移动端注意事项

移动设备浏览器可能对全屏模式有特殊限制。iOS Safari 需要用户手势触发，部分安卓浏览器可能不支持 API。

// 确保在用户交互事件中触发
document.addEventListener('touchstart', () => {
  requestFullscreen(document.documentElement);
}, { once: true });

安全限制

浏览器要求全屏操作必须由用户交互（如点击事件）直接触发，脚本自动调用会被阻止。控制台直接调用 API 通常无效。

// 错误示例：非交互式调用会被阻止
setTimeout(() => {
  requestFullscreen(document.documentElement); // 无效
}, 1000);