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);