在 HTML5 中, W3C 制定了关于全屏的 API，就可以实现全屏幕的效果，全屏目前只有 google chrome 15 +, safri5.1+,firfox10+,IE11 支持
全屏：
var docElm = document.documentElement;
//W3Cif (docElm.requestFullscreen) { docElm.requestFullscreen();}//FireFoxelse if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen();}//Chrome等else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen();}//IE11else if (elem.msRequestFullscreen) { elem.msRequestFullscreen();}退出全屏：
if (document.exitFullscreen) {
document.exitFullscreen();}else if (document.mozCancelFullScreen) { document.mozCancelFullScreen();}else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen();}else if (document.msExitFullscreen) { document.msExitFullscreen();}事件监听：
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);document.addEventListener("mozfullscreenchange", function () {fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);document.addEventListener("webkitfullscreenchange", function () {fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);document.addEventListener("msfullscreenchange", function () {fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);全屏样式设置 ：
html:-moz-full-screen {
background: red;}html:-webkit-full-screen { background: red;} html:fullscreen { background: red;}项目代码实例：
fullScreen(event) {
var viewFullScreen = event.target;
if (event.target.parentNode.style.width = '50%') {
var docElm = event.target.parentNode;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
} else {
alert("当前浏览器不支持全屏化操作！");
}
return false;
}
else if (event.target.parentNode.style.width = '100%') {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else {
alert("当前浏览器不支持全屏化操作！");
}
return false;
}
},
监听全屏事件
document.addEventListener("fullscreenchange", function (event) {
if (document.fullscreen === false ){
event.target.style.width='50%'
}else{
event.target.style.width='100%'
}
}, false);
document.addEventListener("msfullscreenchange", function (event) {
if (document.msFullscreenElement === false ){
event.target.style.width='50%'
}else{
event.target.style.width='100%'
}
}, false);
document.addEventListener("mozfullscreenchange", function (event) {
if (document.mozFullScreen === false ){
event.target.style.width='50%'
}else{
event.target.style.width='100%'
}
}, false);
document.addEventListener("webkitfullscreenchange", function (event) {
if (document.webkitIsFullScreen === false ){
console.log(event.target)
event.target.style.width='50%'
}else{
event.target.style.width='100%'
}
}, false);