可以用css显示全屏吗？答案

【问题标题】：Display full screen with css possible?可以用css显示全屏吗？
【发布时间】：2011-11-14 06:11:55
【问题描述】：

我想知道当我使用 F11 键时是否可以覆盖全屏模式。在许多 Flash 网页中，存在这种覆盖全屏显示的模式。如果可以在 css .pl 中对此进行编码建议代码。谢谢例如http://www.flashmo.com/store/view-template-3057.html

【问题讨论】：

标签： jquery css fullscreen

【解决方案1】：

Firefox 10 Aurora 支持全屏 API。 http://blog.pearce.org.nz/2011_11_01_archive.html

WebKit 也有。 http://peter.sh/2011/01/javascript-full-screen-api-navigation-timing-and-repeating-css-gradients

现在还不是通用的。

【讨论】：

【解决方案2】：

不，在 CSS 中不可能做到这一点。

【讨论】：

【解决方案3】：

不，我知道 CSS 不能让浏览器全屏显示。但是，如果您的目标浏览器在 F11 时全屏显示，您可以通过 jquery $(window).resize 事件拦截该事件。

更多详情请见http://api.jquery.com/resize/。

【讨论】：

【解决方案4】：

您不能像 Flash 应用程序全屏一样全屏。

【讨论】：

【解决方案5】：

据我所知，您无法真正使用 CSS 切换全屏。这是我想出的最好的...

示例

http://jsfiddle.net/dBd56/

CSS

.fullscreen{
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:9999;
    margin:0;
    padding:0;
}

JS

$('#close').click(function() {
    $('#content').removeClass('fullscreen');
});

$('#fullscreen').click(function() {
    $('#content').addClass('fullscreen');
});

HTML

<div id="content" class="">
    Show me larger!

    <br />
    <input id="fullscreen" type="button" value="pseudo fullscreen"  />
    <input id="close" type="button" value="close"  />
</div>

【讨论】：

很抱歉，即使无法全屏显示也能提供帮助。请善意地评论您的反对意见，谢谢。