js 实现全屏

使用 requestFullscreen 方法

通过调用元素的 requestFullscreen 方法可以实现全屏。该方法兼容现代浏览器，但不同浏览器可能需要前缀。

const element = document.documentElement; // 全屏整个页面
if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { // Safari
  element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE11
  element.msRequestFullscreen();
}

监听全屏状态变化

全屏状态变化时会触发 fullscreenchange 事件，可以通过监听该事件来执行相应操作。

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

function handleFullscreenChange() {
  if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
    console.log('进入全屏');
  } else {
    console.log('退出全屏');
  }
}

退出全屏

使用 exitFullscreen 方法可以退出全屏模式，同样需要考虑浏览器兼容性。

if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.webkitExitFullscreen) { // Safari
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE11
  document.msExitFullscreen();
}

检查当前全屏状态

通过 fullscreenElement 属性可以检查当前是否有元素处于全屏状态。

const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
if (fullscreenElement) {
  console.log('当前全屏元素:', fullscreenElement);
} else {
  console.log('未处于全屏状态');
}

全屏样式调整

全屏模式下，CSS 伪类 :fullscreen 可以用于调整全屏元素的样式。

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

兼容性注意事项

不同浏览器对全屏 API 的实现存在差异，建议在实际使用时检测各浏览器前缀以确保兼容性。现代浏览器已逐步标准化，但旧版本可能需要前缀支持。