JavaScript 实现浏览器全屏

请使用插件screenfull screenfull.js-github

拓展阅读：HTML5 full-screen全屏API测试实例页面

下面部分有各种问题。仅供娱乐。

经测试 下面部分代码在Chrome，Opera，Firefox下有效，Edge IE Safari无效。

全屏

var docElm = document.documentElement;
if (docElm.requestFullscreen) { //W3C
    docElm.requestFullscreen();
} else if (docElm.mozRequestFullScreen) { //FireFox 
    docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) { //Chrome等
    docElm.webkitRequestFullScreen();
} else if (docElm.msRequestFullscreen) { //IE 11
    docElm.msRequestFullscreen();
}

进阶版

var doc = document.documentElement;
(doc.requestFullscreen||doc.webkitRequestFullscreen||doc.mozRequestFullscreen||doc.msRequestFullscreen).call(doc);

退出全屏

if (document.exitFullscreen) { //W3C
    document.exitFullscreen();
} else if (document.mozCancelFullScreen) { //FireFox 
    document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) { //Chrome等
    document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) { //IE 11
    document.msExitFullscreen();
}

进阶版

(document.exitFullscreen||document.mozCancelFullScreen||document.webkitCancelFullScreen||document.msExitFullscreen).call(document)

全屏状态

// true全屏，false非全屏
document.fullscreen //W3C
document.mozFullScreen //FireFox
document.webkitIsFullScreen //Chrome等
document.msFullscreenElement //IE 11

事件监听

document.onfullscreenchange //W3C
document.onmozfullscreenchange //FireFox
document.onwebkitfullscreenchange //Chrome等
document.onmsfullscreenchange //IE 11

全屏 css 样式

html:-moz-full-screen { 
    background:red; 
} 
   
html:-webkit-full-screen { 
    background:red; 
} 
   
html:fullscreen
 {  
    background:red; 
}