|| document.mozFullscreenElement
|| document.webkitFullscreenElement;
var fullscreenEnabled =
document.fullscreenEnabled
|| document.mozFullscreenEnabled
|| document.webkitFullscreenEnabled;
在初始化全屏方法时,可以探测需要监听哪一个事件.
Fullscreen CSS
浏览器提供了一些有用的 fullscreen CSS 控制规则:
复制代码
/* html */
:-webkit-full-screen {
/* properties */
}
:-moz-fullscreen {
/* properties */
}
:fullscreen {
/* properties */
}
/* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}
/* styling the backdrop */
::backdrop {
/* properties */
}
在某些情况下,WebKit需要一些特殊处理,所以在处理多媒体时,你可能需要上面的代码。
我认为 Fullscreen API 超级简单,超级有用. 我首次见到这个 API 是在一个名为 MDN’s BananaBread demo 的全客户端第一人称射击游戏, 这真是一个使用全屏模式的绝佳案例。
全屏API提供了进入和退出全屏模式的方式,并提供相应的事件来监测全屏状态的改变,所以各方面都连贯起来了.
请记住这个很好的API吧 —— 在未来的某个时刻,它肯定会派上用场!
