HTML5 requestFullScreen实现网页全屏的例子

时间：2022-06-25 18:18:26 编辑：袖梨来源：一聚教程网

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

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

html5的全屏
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;
}

123456

推荐专题

最新下载

热门教程

HTML5 requestFullScreen实现网页全屏的例子

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程