W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!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; } /* Standard 语法 */ :fullscreen { background-color: yellow; } /* 设置按钮的样式 */ button { padding: 20px; font-size: 20px; } </style> </head> <body> <h1>全屏模式</h1> <p>单击“打开全屏模式”按钮以全屏模式打开此页面。通过单击键盘上的“Esc”键或使用“关闭全屏模式”按钮将其关闭。</p> <button onclick="openFullscreen();">打开全屏模式</button> <button onclick="closeFullscreen();">关闭全屏模式</button> <script> // 使用 JavaScript 在全屏模式中打开页面 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>