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

Posted by on 2011/12/21 Leave a comment (0) Go to comments

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设计草案.

html5, Javascript,

Leave a Comment

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: