在HTML5中,W3C制定了关于全屏的API但是只能由用户事件触发,所以不能自动全屏;用户事件触发方法如下:
// 判断各种浏览器,找到正确的方法 进入全屏 function launchFullscreen (element) { if (element.requestFullscreencreen) { element.requestFullScreen() } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen() } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen() } else if (element.msRequestFullScreen) { element.msRequestFullScreen() } }
必须用户事件触发(可以是鼠标事件,键盘事件等)
//某个元素全屏
launchFullscreen(dom)// 整个网页全屏!
launchFullscreen(document.documentElement)
// 判断浏览器种类 退出全屏 function exitFullscreen () { if (document.exitFullscreen) { document.exitFullscreen() } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen() } } // 退出全屏模式! exitFullscreen()全屏样式CSS
各种浏览器都提供了一个非常有用的全屏模式时的css样式规则:
-webkit-full-screen {
color:#000;
/* properties */
}
:-moz-full-screen {
/* properties */
}
:-ms-fullscreen {
/* properties */
}
:full-screen {
/*pre-spec */
/* properties */
}
:fullscreen {
/* spec */
/* properties */
}
/* deeper elements */
:-webkit-full-screen video {
width: %;
height: %;
}
/* styling the backdrop*/
::backdrop {
/* properties */
}
::-ms-backdrop {
/* properties */
}
另外某些浏览器可以通过meta直接设置全屏
<!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- IOS启用 WebApp 全屏模式 --> <meta name="apple-mobile-web-app-capable" content="yes" />