基本概念
1、HTML5规范允许用户自定义网页上任一元素全屏显示
2、requestFullscreen() 开启全屏显示、cancleFullscreen() 关闭全屏显示
3、不同浏览器兼容性不一样
4、全屏伪类div:-ms-fullscreen，表示在全屏后的状态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: yellow; } div:-ms-fullscreen { width: 600px; } div:-moz-full-screen { height: 400px; } div:-webkit-full-screen { height: 400px; } </style> </head> <body> <div></div> <script> var div = document.getElementsByTagName("div")[0]; div.onclick = function () { if (this.requestFullscreen) { this.requestFullscreen(); } else if (this.mozRequestFullScreen) { console.log(this.mozRequestFullScreen); this.mozRequestFullScreen(); } else if (this.webkitRequestFullScreen) { console.log(this.webkitRequestFullScreen); this.webkitRequestFullScreen(); } } </script> </body> </html>