Daily Archives: 2011/12/21

[html5]网页的全屏模式: Fullscreen API

Demon页面

它是怎么工作的呢? 比如<div>这个元素想要全屏, 首先需要

div.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();

退出全屏模式, 只需要在docment元素做操作即可:

document.webkitCancelFullScreen();
document.mozCancelFullScreen();

当全屏模式被创建后, 你需要针对这个div设置一下css.例如:

div:-webkit-full-screen{
  width: 100% !important;
}
div:-moz-full-screen{
 width: 100% !important;
}
:-webkit-full-screen .tohide{
 display:none;
}
:-moz-full-screen .tohide{
 display:none;
}

Fullscreen API在chrome 15下已经默认开启了, 在Firefox night builds版本下, 你需要在about:config中设置fullscreen-api.enabled为true. 了解更多详情可以参阅Fullscreen设计草案.