CSS3 Webkit全屏检测不工作 [英] CSS3 Webkit Full Screen Detection Not Working

问题描述

我有一个真正的凝灰岩时间让CSS3检测全屏。现在，我有：

I am having a really tuff time getting CSS3 to detect full screen. Right now, I have:

:-webkit-full-screen body {
    color: red;
    background: red;
}

当我在浏览器中点击F11时，

When hitting F11 in my browser, nothing turns red.

对于测试，我试图将一切都变红，但没有成功。我使用的是 Chromium 31.0.1650.57 。我使用： - webkit-full-screen 不正确？

For testing, I am trying to turn everything red but not having success. I am using Chromium 31.0.1650.57. Am I using :-webkit-full-screen incorrectly?

推荐答案

我认为这与你按F11获得全屏有关。您需要通过 webkitRequestFullscreen 和其他跨浏览器版本触发全屏。此外，我认为CSS不适用于身体。
尝试使用包装器并将其应用于该元素：

I think this has something to do with you pressing F11 to get fullscreen. You need to trigger the fullscreen via webkitRequestFullscreen and the other cross-browser versions of this. Also, I think that the CSS doesn't apply to the body. Try to use a wrapper and apply it to that element:

HTML（包装器应用： - webkit全屏至：

HTML (wrapper to apply the :-webkit-full-screen to:

<div id="wrapper"> 
    <a href="#" id="gofullscreen">fullscreen</a>
</div>

CSS：

 html, body {
     width: 100%;
     height: 100%;
 }
 #wrapper {
     height: 100%;
     width: 100%;
 }

 :-webkit-full-screen #wrapper {
     color: red;
     background: red;
 }

b $ b

触发全屏的JavaScript：

JavaScript to trigger the fullscreen:

document.getElementById('gofullscreen').addEventListener('click', function () {
    var elem = document.getElementsByTagName("body")[0];
    elem.webkitRequestFullscreen();
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    }
});

请参阅小提琴和全屏版本
使用Fiddle链接查看代码和全屏版本看到它的工作，Fiddle不允许全屏我想）。

See Fiddle and Fullscreen version (Use the Fiddle link to see the code and the Fullscreen version to see it working, Fiddle doesn't allow fullscreen I think).

但是 ：-webkit-full-screen 等是实验性的，所以不要依赖它。
https://developer.mozilla.org / en-US / docs / Web / Guide / API / DOM / Using_full_screen_mode

But the :-webkit-full-screen and the like are experimental, so don't rely on it. https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

这篇关于CSS3 Webkit全屏检测不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！