HTML5 requestFullScreen实现网页全屏的例子

html5新的api——requestFullScreen，可以实现当前浏览页面全屏，这在手机端效果还是不错的，下面是一个演示例子：

视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持

javascript" >
// 找到适合浏览器的全屏方法
function launchFullScreen(element) {
 if(element.requestFullScreen) {
  element.requestFullScreen();
 }else if(element.mozRequestFullScreen) { //兼容moz
  element.mozRequestFullScreen();
 }else if(element.webkitRequestFullScreen) { //兼容webkit
  element.webkitRequestFullScreen();
 }
}
//退出全屏
function exitFullscreen() {
 if(document.exitFullscreen) {
  document.exitFullscreen();
 }else if(document.mozCancelFullScreen) { //兼容moz
  document.mozCancelFullScreen();
 }else if(document.webkitExitFullscreen) { //兼容webkit
  document.webkitExitFullscreen();
 }
}

在浏览器全屏的使用我们还可以进行样式设置

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

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

html:fullscreen {
    background: red;
}

 点击全屏
 退出全屏
 
 点击让下面的div全屏