[html5 教程]HTML5 requestFullScreen实现网页全屏的例子

更新时间:2019-11-22    来源:Google    手机版     字体:

【www.bbyears.com--Google】

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

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





html5的全屏

<script type = "text/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();
 }
}

</script>

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

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

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

html:fullscreen {
    background: red;
}


 
 
 
 
 123456

本文来源:http://www.bbyears.com/seo/80647.html

热门标签

更多>>

本类排行