js+全屏切换代码

以下是一个使用 JavaScript 实现全屏切换的示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fullscreen Toggle</title>
</head>

<body>
  <button id="toggleFullscreen">Toggle Fullscreen</button>

  <script>
    const toggleButton = document.getElementById('toggleFullscreen');

    toggleButton.addEventListener('click', () => {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().catch(err => {
          console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
        });
      } else {
        document.exitFullscreen().catch(err => {
          console.error(`Error attempting to exit full-screen mode: ${err.message} (${err.name})`);
        });
      }
    });
  </script>
</body>

</html>

基础概念：

requestFullscreen 方法用于将指定的元素（通常是 document.documentElement 表示整个文档）请求进入全屏模式。
exitFullscreen 方法用于退出全屏模式。

优势：

提供沉浸式的用户体验，让用户更专注于内容。
可以更好地展示某些需要大屏幕空间的内容，如视频、图像等。

应用场景：

视频播放器，让用户可以全屏观看视频。
图片查看器，全屏展示高清图片。
游戏页面，提供更广阔的游戏视野。

可能遇到的问题及解决方法：

权限问题：某些浏览器可能需要用户手动允许网页进入全屏模式。确保在合适的时机触发全屏请求，并向用户说明操作。
兼容性问题：不同浏览器对全屏 API 的支持可能略有差异。可以使用特性检测来处理不同浏览器的兼容性。

例如：

function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { // Firefox
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE/Edge
    element.msRequestFullscreen();
  }
}

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { // Firefox
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { // IE/Edge
    document.msExitFullscreen();
  }
}

这样可以提高在不同浏览器中的兼容性。