代码示例:(标识:jsck_element_requestfullscreen_css)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}

/* IE11 语法 */
:-ms-fullscreen {
  background-color: yellow;
}

/* 标准语法 */
:fullscreen {
  background-color: yellow;
}

/* 设置按钮样式 */
button {
  padding: 20px;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>通过 JavaScript 实现全屏</h1>

<p>请单击“打开全屏”按钮,以全屏模式打开此页面。可通过单击键盘上的“Esc”键或“关闭全屏”按钮将其关闭。</p>

<button onclick="openFullscreen();">打开全屏</button>
<button onclick="closeFullscreen();">关闭全屏</button>

<script>
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

<p>注释:Internet Explorer 10 及更早版本不支持全屏模式。</p>

</body>
</html>
运行结果: