使用JavaScript实现PC端的F11全屏模式切换功能-手机端也行

本文将介绍如何使用JavaScript的requestFullscreen API实现全屏模式切换功能，并提供一个简单的示例代码

在Web开发中，全屏模式是一种常见的需求，它可以让用户更好地专注于内容，提供更好的视觉体验。通过使用JavaScript的requestFullscreen API，我们可以轻松地实现全屏模式切换功能。

requestFullscreen API允许将任何元素作为全屏元素，并将其放大到全屏模式。

• documentElement.requestFullscreen()：将整个文档作为全屏元素。
• element.requestFullscreen()：将指定元素作为全屏元素。

检查浏览器是否支持该API

if (document.fullscreenElement) {  
  // 全屏模式已开启  
} else {  
  // 全屏模式未开启  
}
if (document.fullscreenElement) {  
  // 全屏模式已开启  
} else {  
  // 全屏模式未开启  
}
if (document.fullscreenElement) {  
  // 全屏模式已开启  
} else {  
  // 全屏模式未开启  
}

切换示例

<button id="fullscreen-button">进入全屏模式</button>  
  
  <script>  
    document.getElementById('fullscreen-button').addEventListener('click', function() {  
      if (document.fullscreenElement) {  
        document.exitFullscreen();  
      } else {  
        document.documentElement.requestFullscreen();  
      }  
    });  
  </script>
<button id="fullscreen-button">进入全屏模式</button>  
  
  <script>  
    document.getElementById('fullscreen-button').addEventListener('click', function() {  
      if (document.fullscreenElement) {  
        document.exitFullscreen();  
      } else {  
        document.documentElement.requestFullscreen();  
      }  
    });  
  </script>
<button id="fullscreen-button">进入全屏模式</button>  
  
  <script>  
    document.getElementById('fullscreen-button').addEventListener('click', function() {  
      if (document.fullscreenElement) {  
        document.exitFullscreen();  
      } else {  
        document.documentElement.requestFullscreen();  
      }  
    });  
  </script>