基本概念
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>html5——全屏显示
原文地址：https://www.cnblogs.com/wuqiuxue/p/8116978.html