​x
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:fullscreen {
  background-color: yellow;
}
​
/* 设置按钮样式 */
button {
  padding: 10px;
  font-size: 15px;
}
</style>
</head>
<body>
​
<h1>全屏模式</h1>
​
<p>点击“打开全屏”按钮以全屏模式打开此页面。按键盘上的“Esc”键或点击“关闭全屏”按钮退出全屏模式。</p>
​
<button onclick="openFullscreen();">打开全屏</button>
<button onclick="closeFullscreen();">关闭全屏</button>
​
<script>
// 使用 JavaScript 打开全屏模式
const elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  }
}
​
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}
</script>
​
</body>
</html>
​