html5全屏

HTML5规范 允许用户自定义网页上任意元素实现全屏和取消全屏；

element.requestFullScreen();//开启全屏显示；

document.cancel FullScreen();//退出全屏；

现在主流的浏览器基本上已实现全屏显示这一功能，但是不同的浏览器 需要添加前缀：

//Wbkit(safari5.1 and chrome15);

element.webkitRequestFullScreen();

document.webkitCancelFullScreen();

//Firefox 10+

element.mozRequestFullScreen();

document.mozCancleFullscreen();

//W3C提议

element.requestFullScreen();

document.cancelFullScreen();

通过document.fullScreen检测当前是否处于全屏，不同的浏览器需要添加前缀：

document.webkitIsFullScreen、document.mozFullScreen

全屏伪类：

element：full-screen{}、element:-webkit-full-screen{}、element:-moz-full-screen{}

【兼容解决方案】

//进入全屏；
function requestFullScreen(){
var de=document.documentElement;
if(de.requestFullScreen){
de.requestFullScreen();
}else if(de.webkitRequestFullScreen){
de.webkitRequestFullScreen();
}else if(de.mozRequestFullScreen){
de.mozRequestFullScreen();
}
}

//退出全屏；
function exitFullScreen(){
var de=document;
if(de.exitFullScreen){
de.exitFullScreen();
}else if( de.mozCancelFullScreen){
de.mozCancelFullScreen();
}else if(de.webkitCancelFullScreen){
de.webkitCancelFullScreen();
}
}

实例：

document.body.addEventlistener('click',function(){
requestFullScreen();
//5秒后自动退出全屏；
setTimeOut(function(){
exitFullScreen();
},5000);
},flase);