JavaScript 实现页面自动全屏效果 - 完整代码示例 - 常规

<!DOCTYPE html>
<html>
<head>
  <title>Fullscreen Example</title>
  <style>
    #fullscreen-element {
      width: 100%;
      height: 100%;
      background-color: black;
    }
  </style>
</head>
<body>
  <div id="fullscreen-element"></div>
  <script>
    var fullscreenElement = document.getElementById('fullscreen-element');

    function enterFullscreen() {
      if (fullscreenElement.requestFullscreen) {
        fullscreenElement.requestFullscreen();
      } else if (fullscreenElement.mozRequestFullScreen) {
        fullscreenElement.mozRequestFullScreen();
      } else if (fullscreenElement.webkitRequestFullscreen) {
        fullscreenElement.webkitRequestFullscreen();
      } else if (fullscreenElement.msRequestFullscreen) {
        fullscreenElement.msRequestFullscreen();
      }
    }

    enterFullscreen();
  </script>
</body>
</html>
在上面的例子中，`fullscreen-element`是一个`div`元素，通过CSS设置它的宽度和高度为100%，背景色为黑色。在JavaScript代码中，我们定义了一个`enterFullscreen`函数，它尝试使用不同的浏览器前缀来调用相应的全屏方法。最后，我们在页面加载完毕后调用`enterFullscreen`函数，从而实现进入页面就全屏的效果。